knockoutjs + twitterブートストラップでタブを追跡する

Question

ビューモデルで選択したタブを追跡しようとしていますが、動作させられないようです。

次のコードでは、タブをクリックすると、ヘッダーは正しく更新されますが、タブの内容は表示されません。 , click: $parent.selectSectionを削除すると内容が表示されますが、ヘッダーは更新されません。

から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クラス。

ノックアウトでこれを行うには、セクションが現在選択されているかどうかを判断するための計算がある解決策があります。

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/