javascript - Backbone : Different views for different tab content

Question

我有一个通用 View 和 4 个其他 View 。我在通用 View 中使用 Bootstrap 选项卡(导航选项卡)。我希望其他 4 个 View 成为通用 View 中 4 个选项卡的内容。由于我是 Backbone 和 Bootstrap 的新手，我无法弄清楚如何做到这一点。另外，我现在仅在主干中使用 View (这意味着没有模型或 Controller )。肯定会欣赏如何做到这一点的想法。谢谢。

Answer 1

我建议把事情分解。

首先，为选项卡构建 Bootstrap HTML，并为每个选项卡提供一个唯一的选择器。例如，在此文件 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>

第二，现在您可以创建 4 个内容 View ，传递 el 作为每个内容选项卡的 ID:

var tab1 = new ContentView({
   el: '#red'
});
var tab2 = new ContentView({
   el: '#orange'
});
var tab3 = new ContentView({
   el: '#yellow'
});
var tab4 = new ContentView({
   el: '#green'
});