在 Marionette 布局中使用 jQuery 选项卡

Question

我正在尝试在 Marionette 区域内使用 jquery tabs。

两个选项卡区域的 HTML 如下所示：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
</div>

我想要做的是有一个像这样的区域，在“标签”中有多个“事物”——所以添加一个 < li > 和一个 div。

我在主干中所做的是抓取这些“东西”的集合，并在每个“东西”上运行：

if (thing_type === "content_pane") {
    thing_view = new APP.Views.ThingView({ model : thing_model});
}

//Paint the region
overall_layout.some_region.show(thing_view);

事物视图如下所示：

<div class="thing_view ui-state-active">
    <div class="tabs">
        <ul>
            <li><a href="#tabs-1">{{mustache_variable}}</a></li>
        </ul>
        <span class="thing_panes">
            <div id="tabs-1">
                <p>1roin <a href="http://www.google.com/">Google</a>elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
        </span>
    </div>
</div>

显然，现在每次运行此循环时，它都会复制前一个实例。

我的问题是——为每个视图附加 li 和 div 的最佳方式是什么？是复合视图吗？它是嵌入一个区域吗？收藏视图？我对此有点迷茫，非常感谢您的意见。

Answer 1

您可以将同一个集合绑定到多个视图。这是一个使用两个集合视图的示例。我确信还有其他方法，但这是相当简单的。

http://jsfiddle.net/puleos/k3Nzz/

标记：

<div id="tab-container">
    <section id="tabs"></section>
    <section id="tab-content"></section>
</div>
<a id="add-tab" href="#addTab/2">Add a Tab!</a>

<script type="text/html" id="tab-template">
  <a href="#tabs-<%=id%>"><%=tabName%></a>
</script>

<script type="text/html" id="tab-content-template">
    <div id="tabs-<%=id%>">
      <p><%=content%></p>
    </div>
</script>

JS

var App = new Marionette.Application();

App.addRegions({
    "tabs": "#tabs",
    "tabContent": "#tab-content"
});

App.on("initialize:after", function() {
    Backbone.history.start();
});

App.module("TabModule", function(Mod, App, Backbone, Marionette, $, _){
    var tabsCollection = new Backbone.Collection([
          { id: 1,
            tabName: "tab1",
            content: "tab1 content elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem" 
            },
        { id: 2,
            tabName: "tab2",
            content: "tab2 content elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem" 
            },
    ]);

    var TabItem = Marionette.ItemView.extend({
        tagName: "li",
        template: "#tab-template"
    });

    var TabView = Marionette.CollectionView.extend({
        itemView: TabItem,
        itemViewContainer: "ul",
        tagName: "ul"
    });

    var TabContentItem = Marionette.ItemView.extend({
        tagName: "div",
        template: "#tab-content-template"
    });

    var TabContentView = Marionette.CollectionView.extend({
        itemView: TabContentItem,
        itemViewContainer: "div"
    });

    // Define a controller to run this module
    // --------------------------------------
    var Router = Marionette.AppRouter.extend({
        appRoutes: {
        "addTab/:tab": "addTab"
        },
    });

    var Controller = Marionette.Controller.extend({

        initialize: function(options){
            this.region = options.region
        },
        addTab: function(tab){
            var tabCount = tabsCollection.length + 1;
            tabsCollection.add({
                id: tabCount, 
                tabName: "tab" + tabCount,
                content: "tab" + tabCount + "elit arcu..." 
            });

            $("#tab-container").tabs("refresh");
            $("#add-tab").attr("href", "#addTab/"+ tabCount);
        },
        start: function(){
            var tabView = new TabView({
                collection: tabsCollection    
            });
            var tabContentView = new TabContentView({
                collection: tabsCollection    
            });

            App.tabs.show(tabView);
            App.tabContent.show(tabContentView);
            $("#tab-container").tabs();
        }

    });

    Mod.addInitializer(function(){
        Mod.controller = new Controller();
        Mod.router = new Router({
            controller: Mod.controller
        });
        Mod.controller.start();
    });
});

// Start the app
// -------------
App.start();