Backbone 中的智能渲染子视图答案

【问题标题】：Smart rendering subviews in BackboneBackbone 中的智能渲染子视图
【发布时间】：2014-11-06 14:20:48
【问题描述】：

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 视图，而只是呈现子视图（在这种情况下只有家）。对于路由器中的每个页面，我们现在需要手动定义这个视图树。比如这样：

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：我正在使用带有 require.js 的主干.js。对不起，我的英语不是我的母语...

【问题讨论】：

标签： javascript backbone.js requirejs

【解决方案1】：

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

LayoutManager 为组合布局和 Backbone 中的视图。

我使用它，它对我很有用。

https://github.com/tbranyen/backbone.layoutmanager/wiki

【讨论】：

【解决方案2】：

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

【讨论】：