您如何在 Backbone 中附加您的子视图？答案

【问题标题】：How do you append your sub-views in Backbone?您如何在 Backbone 中附加您的子视图？
【发布时间】：2011-09-30 12:51:35
【问题描述】：

我有一个 Backbone 应用程序，它在您导航到的每个页面上呈现多个相关视图。例如，一个页面呈现以下视图：

上下文栏
- 下拉菜单
- 分页
主表
- 表格行

这里的主表视图是第一个由我的路由器附加到 DOM 的视图 - 在此视图中 reset 绑定到其中的 appendRows 函数 - 在每个表行中添加：

// Instantiate the view, render and append it to the DOM
var tableView = new TableView({ collection: blahCollection });
$("main").append(tableView.render().el);

// Fetch the latest data for the collection (triggers a reset which appends rows)
blahCollection.fetch();

这对我来说似乎是合乎逻辑的，但是例如在添加分页子视图时，我会问自己一个问题，“视图真的应该控制附加到屏幕上的内容吗”？

因此，给定分页示例：

视图（在本例中为主表视图）是否应该控制如何/何时将分页附加到 DOM？
应该是路由器吗？如果是这样，它应该调用父视图上的函数来执行此操作 - 还是应该将逻辑完全保留在主视图之外？

【问题讨论】：

标签： backbone.js

【解决方案1】：

我喜欢让我的路由器为我做很多高级别的事情。例如，我将设置一个基本布局......像这样：

<body>
    <div id="contextBar">
        <div id="menus"></div>
        <div id="pagination"></div>
    </div>
    <div id="mainTable"></div>
</body>

然后，在我的路由器处理程序中，我将连接彼此无关的视图：

var contextView = new ContextView({el: $("#contextBar")});
var menusView = new MenusView({el: $("#menus")});
var paginationView = new PaginationView({el: $("#pagination")});
var tableView = new MainTableView({el: $("#mainTable")});

就主表而言，我看到表视图和行视图紧密耦合，因为它们彼此直接相关，所以我通常让集合视图（您的表视图）创建和管理单个项目视图（您的表格行视图）。

至少，这就是我使用 Backbone 组织代码的方式。

【讨论】：

我区分了路由视图和子视图。通常，对于路由视图，我有一个处理显示/隐藏的父类，使用“何时（隐藏所有视图）。然后（显示此视图）”模式。