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重新渲染您的菜单。

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

1 个答案:

将CollectionView用于菜单

让控制器更新菜单