javascript - Backbone: Different views for different tab content -
i have generic view , 4 other views. using bootstrap tabs (nav-tabs) in generic view. want other 4 views content of 4 tabs in generic view. new backbone , bootstrap not able figure out how that. also, using views in backbone (which means, there no model or controller). sure appreciate idea of how this. thank you.
i suggest breaking things down.
1st build bootstrap html tabs , give unique selector each 1 of them. instance, on file here https://gist.github.com/mnewt/4228037 :
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#red" data-toggle="tab">red</a></li> <li><a href="#orange" data-toggle="tab">orange</a></li> <li><a href="#yellow" data-toggle="tab">yellow</a></li> <li><a href="#green" data-toggle="tab">green</a></li> <li><a href="#blue" data-toggle="tab">blue</a></li> </ul> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" id="red"> <h1>red</h1> <p>red red red red red red</p> </div> <div class="tab-pane" id="orange"> <h1>orange</h1> <p>orange orange orange orange orange</p> </div> <div class="tab-pane" id="yellow"> <h1>yellow</h1> <p>yellow yellow yellow yellow yellow</p> </div> <div class="tab-pane" id="green"> <h1>green</h1> <p>green green green green green</p> </div> <div class="tab-pane" id="blue"> <h1>blue</h1> <p>blue blue blue blue blue</p> </div> </div>
2nd can create 4 content views passing el
id each content tab:
var tab1 = new contentview({ el: '#red' }); var tab2 = new contentview({ el: '#orange' }); var tab3 = new contentview({ el: '#yellow' }); var tab4 = new contentview({ el: '#green' });
Comments
Post a Comment