Question

我有一个通用视图和另外4个视图。我在通用视图中使用bootstrap选项卡（nav-tabs）。我希望其他4个视图是通用视图中4个选项卡的内容。由于我是骨干和bootstrap的新手，我无法弄清楚如何做到这一点。此外，我现在只使用骨干中的视图（这意味着，没有模型或控制器）。肯定会欣赏如何做到这一点的想法。谢谢。

Answer 1

我建议你把事情搞砸。

首先，您为选项卡构建引导程序HTML，并为每个选项卡提供唯一的选择器。例如，在此文件中https://gist.github.com/mnewt/4228037：

   $('.knob').each(function () {

       var $this = $(this);
       $this.knob({

       });
       $({
           value: 0
       }).animate({

           value: data
       }, {
           duration: 2000,
           easing: 'swing',
           step: function () {
               $this.val(Math.ceil(this.value)).trigger('change');

           }
       })

   });
</script>
<input class="knob animated" value="0" readonly data-width="80%">

第二，现在您可以创建4个内容视图，将<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>作为每个内容标签的ID：

el

Answer 2

我使用基于this的css驱动标签以不同的方式处理此问题。

我们的想法是让css处理隐藏和显示选项卡。 js只是简单地监听单击哪个选项卡并相应地呈现视图。

例如，以下可以是定义选项卡结构的html和容纳每个视图的容器。 HTML：

<div>
    <ul id="profileMainView" class="tabs">
        <li class="labels" >
            <label class="profile-selectTab selectedTab" for="tab0" id="profile-label0">
                Tab 0
            </label>
            <label class="profile-selectTab" for="tab1" id="profile-label1">
                Tab 1
            </label>
            <label class="profile-selectTab" for="tab2" id="profile-label2">
                Tab 2
            </label>
        </li>
    </ul>
</div>

<ul class="tabs">
    <li>
        <input type="radio" checked name="tabs" id="tab0">
        <div id="tab-content0" class="tab-content">
            Tab 1 Content
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab1">
        <div id="tab-content1" class="tab-content">
            Tab 2 Content
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab2">
        <div id="tab-content2" class="tab-content">
            Tab 3 Content
        </div>
    </li>
</ul>

此css可以处理隐藏和显示标签：

.tabs input[type=radio] {
    display:none;
}

.tabs {
    float: none;
    list-style: none;
    padding: 0;
}

.tabs li {
    display: block;
}

.labels{
    border-bottom: 1px solid #DDD;
    height: 55px;
}

.labels:after {
    content: '';
    display: table;
    clear: both;
}

[id^=tab]:checked ~ div[id^=tab-content] {
    display: block;
}

[id^=tab]:checked ~ div[id^=tab-content] {
     display: block;
}

最后，js可以只监听选择了哪个标签，然后通过传入所选标签的id来呈现视图：

var mainView = Backbone.View.extend({
     events: {
        'click .profile-selectTab' : function(e) {
            this.renderTab(e.currentTarget.id);
     },
     renderTab: function(id){
         if(id == 'profile-label0'){
             yourView1.render('tab-content0');
         } else if(id == 'profile-label1'){
             yourView2.render('tab-content1');
         } else if(id == 'profile-label2'){
             yourView3.render('tab-content2');
         }
     }
});

每个视图都会呈现并附加到正确的标签页面。例如：

var yourView1 = Backbone.View.extend({
    render : function(targetDiv){
        $('#' + targetDiv).append(...);
    }
});

Backbone：针对不同选项卡内容的不同视图

2 个答案: