Question

tl; dr：当从一个页面移动到另一个页面时，只更改/销毁需要它的这些块（不重新渲染整个页面）。并使应用程序路由器尽可能简单。

我是骨干网的新手，我开始看到的所有示例都是关于单个页面的小型应用程序，有时会发生一些变化（添加/删除一些元素，但从不完全重新渲染）。但当我开始做我的应用程序有点复杂时，我遇到了子视图组织的问题......

问题：当应用程序的每个页面都包含子视图（每个子视图可以有另一个子视图，即嵌套的子视图），这些子视图负责在页面中显示它们的块时，合理的愿望就不是重新渲染当您浏览页面时不会改变的块。有时你需要重新渲染整个页面，当它与之前完全不同时，有时只是页面上的一些块。但在这种情况下，应用程序路由器变成了包含太多逻辑的怪物对象，因此难以维护。

我想要的是什么：我希望我的路由器像

define(['jquery', 'backbone'], function ($, Backbone) {

    return Backbone.Router.extend({

         routes: {
             "": "home",
             ..........
         },    

         home: function () {
             require(['views/home'], function (View) {
                 var view = new View({ el: $("body") });
                 view.render();
             });
         },

        ..........

    });
});

所以，我的目标是移动逻辑以将子视图渲染到视图。所以该视图将决定做什么：渲染自己包括子视图或只是让子视图为自己决定相同的问题。

可能的解决方案：考虑一下我想到了包含视图树作为应用程序状态的全局对象（例如 first_design（home（about，login）））。当我们移动到下一页时，它具有相同的主视图（即 first_design ），我们不会渲染 first_design 视图，但只是＃＆＃ 39; s子视图（在这种情况下只有 home ）。对于路由器中的每个页面，我们现在需要手动定义这个视图树。例如：

define(['jquery', 'backbone'], function ($, Backbone) {

    return Backbone.Router.extend({

         routes: {
             "": "home",
             "contacts": "contacts",
             ..........
         },    

         home: function () {
             require(['views/firstDesign', 'views/home', 'views/about', 'views/login'], function (FirstDesign, Home, About, Login) {
                 new FirstDesign({ el: $("body"), subviews: { new Home({ subviews: { new About(), new Login() } }) } });
             });
         },

         contacts: function () {
             require(['views/firstDesign', 'views/contacts'], function (FirstDesign, Contacts) {
                 new FirstDesign({ el: $("body"), subviews: { new Contacts() } });
             });
         },

        ..........

    });
});

所以，问题是......：我相信我现在正在重新发明轮子，显然我的轮子还不够好（甚至可能不是圆形的：D）。那么我需要什么实现？或者如果没有，那么我应该如何正确地做到这一点？谢谢！

P.S：我使用backbone.js和require.js。抱歉我的英语，这不是我的母语......

Answer 1

有一个名为LayoutManager的Backbone插件。从他们的维基页面：

LayoutManager为组装布局提供了逻辑基础 Backbone中的观点。

我使用它并且它很适合我。

<强> https://github.com/tbranyen/backbone.layoutmanager/wiki

Answer 2

我意识到我的解决方案并不灵活。毕竟我决定使用木偶。真正帮助我解决问题的是this question。 p.s：Marionette现在在Region类中有一个hasView方法。

Backbone中的智能渲染子视图

2 个答案: