Question

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

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

这里的主表视图是我的路由器首先附加到DOM的 - 在此视图中reset绑定到其中的appendRows函数 - 它在每个表行中加法：< / p>

// 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？
路由器应该吗？如果是这样，它是否应该调用父视图上的函数来执行此操作 - 或者逻辑是否应完全保留在主视图之外？

Answer 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组织代码的方式。

如何在Backbone中附加子视图？

1 个答案: