如何在 Backbone.Marionette 中集成菜单子页面

Question

我正在使用 jQuery mobile 1.4.0 和 Backbone.Marionette 构建一个移动 Web 应用程序。 我有一些视图，包括一个 CollectionView、一个用于详细信息的 ItemView 和一个用于编辑的 ItemView。 目前，我只使用我的主要 jQuery 移动页面的内容部分来渲染带有 Marionette 和 Backbone 的东西（作为一个区域） 我有一个静态菜单，它也是一个 jQuery 移动页面。

看起来像这样：

<section data-role="page" id="main">
    <header data-role="header" data-position="fixed">
        <h1 id="heading">Liste</h1>
            <a id="menu-btn" href="#/menu" class="ui-btn-right">Menu</a>
    </header>

    <section class="ui-content" data-role="main" id="content">
        <!-- a Marionette.Region for displaying error messages -->
        <div id="message"></div>
        <!-- This is the main Region -->
        <div id="page"></div>
    </section>
</section>

<!-- this is the jquery Mobile menu page. It has it's own header -->
<section data-role="page" id="menu">
    <header data-role="header" data-position="fixed">
        <a href="#" data-icon="back" data-iconpos="notext">Zurück</a>
        <h1>Menü</h1>
    </header>

    <section class="ui-content" data-role="main" id="menu-page">
        <ul data-role="listview">
            <!-- the href should be replaced with a click-event -->
            <li><a href="#/users/new" class="ui-icon-plus">Neu</a></li>
        </ul>
    </section>
</section>

我的 Backbone.Router 中有我的菜单路由（jqm 路由已禁用），它显示带有 $.mobile.changePage 的菜单页面。 目前，菜单页面的内容是静态的（它只包含“新”选项）。现在我想让我的菜单动态化，以便它显示选项，这些选项是当前显示在主区域中的视图的有效操作。

例如，当显示详细信息视图时，它应该包含“编辑”、“删除”。在列表视图中，它应该包含“new”。

我想我需要一个 MenuView。但是我应该如何检查哪些菜单项适用于哪个视图？我应该什么时候渲染菜单视图？ 另外，当菜单项被点击时，如何让我的视图做出反应？

最好的方法是什么？

Answer 1

这就是我要做的，

为您的菜单使用 CollectionView

为您的菜单使用CollectionView 使您能够动态定义您的菜单，您的菜单将使用模型集合来定义，类似于这样

{
  lable : 'Home',
  href  : '/home',
  icon  : 'pic/home.png'
}

让你的控制器更新菜单

我假设您的控制器会在触发路由时更新内容区域。您可以让您的控制器使用 MenuItemCollection 重新呈现您的菜单，该 MenuItemCollection 包含与正在显示的内容相关的菜单项列表。