javascript - vue.js - 组织具有多个 View 的大型单页应用程序

Question

我正在使用新的 MVVM 框架 - Vue.js ( http://vuejs.org/ )。

在简单的示例和演示中它真的很棒，但现在我正在尝试创建具有多个 View 的大型 SPA，并且我意识到框架的文档中没有描述如何做到这一点的最佳模式。

主要问题是我不知道如何处理不同路线上的 View 。

例如，我正在使用 Director ( https://github.com/flatiron/director ) 进行路由，但如何更改 View ？

var booksCtrl = function () {
   var booksViewModel = new Vue({
       el: '#books'
       data: { ... }
       ready: function () {
          // hide previous ViewModel and display this one??
       }
   });
};

var editBookCtrl = function (id) { 
   var editBookViewModel = new Vue({
       el: '#editBook'
       data: { ... }
       ready: function () {
          // hide previous ViewModel and display this one??
       }
   });
};

var routes = {
    '/books': booksCtrl,
    '/books/:id/edit': editBookCtrl
};

var router = new Router(routes);
router.init();

我是否需要创建单独的 Vue.js ViewModel，并且像本例中那样只创建 display:block/display:none 它们？

您认为正确的方法是什么？谢谢!

Answer 1

可以使用 v-view 和 v-ref 解决嵌套 subview 。

html

<div id="main">
    <div v-view="currentView" v-ref="view"></div>
</div>
<ul>
    <li><a href="#/">top</a></li>
    <li><a href="#/nest/view1">nest/view1</a></li>
    <li><a href="#/nest/view2">nest/view2</a></li>
</ul>

<script id="top" type="x-template">
    <div>top view</div>
</script>

<script id="nest" type="x-template">
    <div>
        <span>nest view</span>
        <div v-view="subview"></div>
    </div>
</script>

JavaScript

Vue.component('top', Vue.extend({
    template: "#top",
}));

Vue.component('nest', Vue.extend({
    template: '#nest',
    components: {
        view1: Vue.extend({
            template: '<span>this is subview 1</span>',
        }),
        view2: Vue.extend({
            template: '<span>this is subview 2</span>',
        }),
    },
    data: {
        subview: "view1",
    },
}));

var main = new Vue({
    el: "#main",
    data: {
        currentView: "top",
    },
});

var router = new Router({
    '/':        function() { main.currentView = 'top' },
    '/nest/:view': function(view) {
        main.currentView = 'nest';
        main.$.view.subview = view;
    },
});
router.init();

jsfiddle:http://jsfiddle.net/koba04/WgSK9/1/