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/

마크 업 :

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