2012-02-13 6 views
0

例としてHTMLタブバーを使用します。通常、ulとdivのリストがあります。私が発見したすべてのバックボーンとしては、など、 'エル'、 'tagNameを' で一つのノードのみでビューをリンク...2つ以上の好きなノードでバックボーンビューを作成するにはどうしたらいいですか?

HTMLのTabBar:

<div class=".tabbar"> 
    <ul class=".tabbar-header"> 
     <li><a href="#tab-cars">Cars</a></li> 
     <li><a href="#tab-houses">Houses</a></li> 
    </ul> 

    <div id="tab-cars" class=".tabbar-item">...</div> 
    <div id="tab-houses" class=".tabbar-item">...</div> 
</div> 

バックボーンコード:

window.TabBarView = Backbone.View.extend({ 

    el: ???, 

    tabs: [], 

    render:function (eventName) { 

     // Render all tabs in this.tabs 

     _.each(this.tabs, function (item, position) { 
      // Render each tab with item.render() 
     }, this); 

     return this; 
    } 
}); 

window.TabBarItemView = Backbone.View.extend({ 

    el: ???, 

    initialize:function() { 
     this.model.bind("change", this.render, this); 
     this.model.bind("destroy", this.close, this); 
    }, 

    render:function (eventName) { 

     // Render the tab header and tab content 

     return this; 
    } 

}); 

TabBarViewにいくつかのTabBarItemViewを追加し、それぞれul.tabbar-header内にliノードを作成し、コンテンツとしてdiv.tabbar-itemを作成します。

答えて

3

私はこの問題に対処する記事を書いた:http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

あなたが欲しい、またはコレクションビューとアイテムとの親/子のセットアップ何をするために、単一のビューを使用するか、どのようにそれはあなたが表示されます

あなたのサンプルコードに表示されているようなビュー

+0

ああ、私はコードを書き換えて、今はokです。書き換えは、ナビゲーション用とサブコンテンツ用の2つのサブビューを作成することにあります。そして、Tabbarviewは新しい/古いタブを管理します。そして、TabBarItemViewはdisapearedです。ありがとう。 –

0

別のナビゲーションビューを作成して、ナビゲーションにタブアイテムビューのレンダリングメソッドを使用してアイテムを追加させることができます。

タブアイテムビューをレンダリングするときは、navigation.add(new nav item); のような操作を行い、ナビゲーション項目を削除する方法を追加します。

あなたは以下のタブをレンダリングするときに純粋なhtmlでナビゲーションを維持し、<li>アイテムをjquery/javascriptで追加できます。

あなたが本当に必要な場合は、私はおそらく今夜作ることができますが、完全に動作する例を与えることはできません。

関連する問題