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

Question

I am building a mobile web application using jQuery mobile 1.4.0 and Backbone.Marionette. I have some views, including a CollectionView, an ItemView for details and an ItemView for editing. Currently, I'm using only the content-section of my main jQuery mobile page for rendering stuff with Marionette and Backbone (as a region) I have a static menu, which also is a jQuery mobile page.

It looks like this:

<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>

I have my menu route in my Backbone.Router (jqm routing is disabled) that shows the menu page with $.mobile.changePage. Currently, the content of the menu page is static (it contains only the "new" option). Now I want to make my menu dynamic so that it shows options which are valid actions for the view that is currently displayed in the main region.

For example, when the details view is displayed, it should contain "edit", "delete". In the list view, it should contain "new".

I think I need a MenuView for this. But how should I check which menu items are for which view? And when should I render the menu view? Also, how can I get my view to react to when then the menu item was clicked?

What would be the best approach for this?

Answer 1

Here is what I would do,

Use CollectionView for your menu

Using a CollectionView for your menu gives you the ability to dynamically define your menu, your menu would be defined using a collection of models, something like this

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

Have your controller update the menu

I assume your controller updates the content area when a route is triggered. You can have your controller re-render your menu using the a MenuItemCollection that has list of menu items related to the content being displayed.