主干中的智能渲染子视图

Smart rendering subviews in Backbone

本文关键字：视图 智能      更新时间：2023-09-26

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视图，而是它的子视图（在这种情况下，只有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）。那么，我需要什么，有什么实现吗？或者如果没有，那么我应该如何正确地做呢？谢谢

附言：我使用backbone.js和require.js。很抱歉我的英语不是我的母语。。。

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

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

我用它，它对我很有用。

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

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

相关文章：