2

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

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

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

4

2 回答 2

3

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

  • 控制器需要创建视图实例并传入他们需要的数据(模型、集合等),然后在区域内显示视图
  • 路由器唯一要做的就是将 URL 与控制器操作匹配(即“如果在地址栏中输入此 URL,则应用程序应启动此控制器操作”)

所以基本上,这是你的问题:你错过了一个控制器动作(例如MyApp.AdminApp.Users.New.newUser(),它将呈现你想要的视图,然后你可以从你的路由器调用它......)

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

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

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

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

于 2013-05-15T07:16:40.813 回答
0

前段时间我有同样的问题,我强烈建议参与 Marionette 布局、集合、复合和集合视图、区域以及如何在模板中显示内容。

继续阅读教程并不难,我建议阅读 lostechis.com,这是 Marionette 的创建者 Derick Bailey 的一个非常有教育意义的博客,也是 Marionette 的官方网站。

这只是教育自己做测试,当你想到一些问题时搜索它,如果没有找到,不要怀疑在这里问它。

对于侧边栏和其他一些东西,您可以使用 JQuery-ui 或 Twitter 引导程序,很容易将它们与骨干/木偶视图集成,但您只需阅读即可实现。

你很幸运。

于 2013-05-14T20:35:34.160 回答