Использование вкладок jQuery с марионеточными макетами

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/

Markup:

<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();