AJAX部分加载后Vue绑定？

Question

我刚开始使用Vue.js并尝试将其合并到我已经构建了一段时间的应用程序中.我的应用程序是使用Laravel,相当数量的jQuery等构建的.

我的应用程序中的所有导航元素都使用AJAX(不是通过Vue)来返回部分视图.因此,任何内部链接或表单提交都通过AJAX提交给返回部分的Laravel路由.

我已经设置了我的第一个Vue实例,但它只在访问者第一次访问使用Vue实例的页面时绑定到该元素.Vue实例仍然存在,但当用户离开页面然后返回时,它失去了它与元素的绑定 - 可能是因为当用户导航时元素已从DOM中删除.

如何让Vue在返回DOM时绑定回元素(通过不由Vue执行的AJAX加载)？

我的main.js(由Elixir/Browserify消费):

window.MaintenanceStatus = require('./components/Status.js');

Status.js

var Vue = require('vue');
Vue.use(require('vue-resource'));

module.exports = new Vue({
    el: '#app',

    data: {
        message: ''
    },

    ready: function() {
        this.message = 'loading ...';
    },

    methods: {
        setMessage: function(message) {
            this.message = message;
        },

        getStatus: function(url, data) {
            this.message = 'loading ...';
            this.$http.get(url, data)
                .success(function(result) {
                    console.log('Status get success');
                    this.setMessage(result);
                })
                .error(function() {
                    console.log('Status get error');
                    this.setMessage('Error');
                });
        }
    }
});

消费代码是通过AJAX返回的部分/模板...

@extends('layouts.partials.content')


@section('content')
    <div id="app">
        <pre>@{{ $data | json }}</pre>
    </div>
@stop

@section('javascript')
<script type="text/javascript" class="document-script">
$(function()
{
    var href ...
    var data {...}

    MaintenanceStatus.getStatus(href, data);
});
</script>
@stop

请注意,它适用于整页刷新,但如果我导航到另一个页面(再次是一个AJAX调用),那么我返回到这个视图,我只看到{{$ data | json}} ... Vue似乎已经失去了它与app元素的绑定.我怎样才能找回来？

我尝试将Vue实例绑定到一个永远不会离开DOM的元素,然后创建一个组件,但我得到了相同的结果......组件在整页刷新时呈现,但是当通过AJAX加载部分时不会.

我也尝试过使用.$ mount,但这没有效果.

Answer 1

以下是实现您想要的功能的一种方法的示例，但我相信 Vue 的创建者不推荐这样做：

父 vue 实例声明：

window.vm = new Vue({...})

这部分可能位于 ajax 调用的成功函数中：

var newContent = $(response.new_content_html).wrap('<div></div>');

$('#some-container-for-the-dynamic-content').html(newContent);
var newContentInstance = window.vm.$addChild({ 
     el: '#some-container-for-the-dynamic-content', 
     data: function data() {
          return { emptyRecordData: {} };
     } 
});
newContentInstance.$mount();
newContentInstance.$data.someOtherData = response.some_other_data;