跟蹤與knockoutjs + twitter引導標籤

Question

我試圖跟蹤視圖模型中選定的選項卡，但我似乎無法使其工作。

在以下代碼中，當您單擊一個選項卡時，標題將正確更新，但不會顯示該選項卡的內容。如果您刪除, click: $parent.selectSection，則會顯示內容，但標題不會更新。

現在，如果您從li中刪除data-bind="css: { active: selected }"，那麼當您單擊選項卡時，它似乎工作，但選擇第二個選項卡的按鈕沒有。

我該如何做這項工作？

參見：http://jsfiddle.net/5PgE2/3/

HTML：

<h3> 
    <span>Selected: </span> 
    <span data-bind="text: selectedSection().name" /> 
</h3> 
<div class="tabbable"> 
    <ul class="nav nav-tabs" data-bind="foreach: sections"> 
     <li data-bind="css: { active: selected }"> 
      <a data-bind="attr: { href: '#tab' + name } 
, click: $parent.selectSection" data-toggle="tab"> 
       <span data-bind="text: name" /> 
      </a> 
     </li> 
    </ul> 
    <div class="tab-content" data-bind="foreach: sections"> 
     <div class="tab-pane" data-bind="attr: { id: 'tab' + name }"> 
      <span data-bind="text: 'In section: ' + name" /> 
     </div> 
    </div> 
</div> 
<button data-bind="click: selectTwo">Select tab Two</button> 

JS：

var Section = function (name) { 
    this.name = name; 
    this.selected = ko.observable(false); 
} 

var ViewModel = function() { 
    var self = this; 
    self.sections = ko.observableArray([new Section('One'), 
    new Section('Two'), 
    new Section('Three')]); 
    self.selectedSection = ko.observable(new Section('')); 
    self.selectSection = function (s) { 
     self.selectedSection().selected(false); 

     self.selectedSection(s); 
     self.selectedSection().selected(true); 
    } 

    self.selectTwo = function() { self.selectSection(self.sections()[1]); } 
} 

ko.applyBindings(new ViewModel()); 

Answer 1

有幾種方法可以解決這個或者使用引導程序的JS或只是有淘汰賽添加/刪除active類。

要做到這一點與Knockout，這裏是一個解決方案，其中部分本身有一個計算，以確定它是否目前選定。

var Section = function (name, selected) { 
    this.name = name; 
    this.isSelected = ko.computed(function() { 
     return this === selected(); 
    }, this); 
} 

var ViewModel = function() { 
    var self = this; 

    self.selectedSection = ko.observable(); 

    self.sections = ko.observableArray([ 
     new Section('One', self.selectedSection), 
     new Section('Two', self.selectedSection), 
     new Section('Three', self.selectedSection) 
    ]); 

    //inialize to the first section 
    self.selectedSection(self.sections()[0]); 
} 

ko.applyBindings(new ViewModel()); 

標記看起來像：

<div class="tabbable"> 
    <ul class="nav nav-tabs" data-bind="foreach: sections"> 
     <li data-bind="css: { active: isSelected }"> 
      <a href="#" data-bind="click: $parent.selectedSection"> 
       <span data-bind="text: name" /> 
      </a> 
     </li> 
    </ul> 
    <div class="tab-content" data-bind="foreach: sections"> 
     <div class="tab-pane" data-bind="css: { active: isSelected }"> 
      <span data-bind="text: 'In section: ' + name" /> 
     </div> 
    </div> 
</div> 

樣品在這裏：http://jsfiddle.net/rniemeyer/cGMTV/

有很多，你可以使用的變化，但我認爲這是一個簡單的方法。

這是一個調整，其中活動選項卡使用部分名稱作爲模板：http://jsfiddle.net/rniemeyer/wbtvM/