Backbone.js Marionette 路由器和嵌套 View

Question

我正在深入研究整个“单页应用程序”和 Backbone.js(特别是 Marionette)的东西。我正在开发一个相当复杂的应用程序。我想知道您如何设置路由器来处理嵌套 View ，以便也呈现“包含 View ”。例如，假设我有一个 Admin 部分，并且在该部分下我有一个 Users 部分。在用户下，我有“添加用户”和“搜索用户”的选项卡。

如果我选择了“添加用户”，我想我的 URL 有片段“#admin/users/add”。路由到具有添加用户表单的 View 。但是，如果您直接转到该 URL，我想再次显示该表单，而且顶部导航栏突出显示“管理员”，管理员特定侧边栏带有我的管理员导航并突出显示“用户”按钮。我需要整个 HTML 页面，而不仅仅是 Add User ItemView。

当页面第一次加载(刷新或从书签)时，如何加载 html 结构和“父 View ”？谢谢!

Answer 1

这是您需要考虑应用程序行为的方式:

Controller 需要创建 View 实例并传入他们需要的数据(模型、集合等)，然后显示区域内的 View

路由器唯一要做的就是将 URL 与 Controller 操作匹配(即“如果在地址栏中输入此 URL，应用程序应启动此 Controller 操作”)

所以基本上，这是你的问题:你缺少一个 Controller 操作(例如 MyApp.AdminApp.Users.New.newUser() 它将呈现你想要的 View ，然后你可以从你的路由器调用它......)

有帮助的一件事(尽管与您当前面临的问题无关)是始终调用 navigate使用 trigger: false 的方法(这是默认设置)。这可确保您的应用程序正常运行，并且路由器仅限于将 URL 与 Controller 操作匹配。

关于菜单(突出显示当前条目)，我会将其设为单独的 Marionette 模块( https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md )，并拥有一组模型(不会保存在服务器上)来列出您的菜单条目。这样，您可以通过设置其模型 active 来管理当前条目。属性为真(并在 View 中检查该属性以突出显示当前条目)。

起初这可能需要很多，但在与 Marionette 合作几个小时后，这一切都会变得有意义......

(无耻的插件:我正在写一本关于 Marionette 的书，它将带你从初学者到完全独立于 Marionette。在那里，我将介绍这类功能，尤其是菜单管理以及如何突出显示当前选项。如果你'想看看，http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf 有一个免费的 55 页样本，这本书(仍在编写中)在 https://leanpub.com/marionette-gentle-introduction)