Question

我正在尝试在木偶地区内使用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();

使用带有木偶布局的jQuery选项卡

1 个答案: