knockoutjs + twitter bootstrap ile sekmeleri takip edin

Question

Görünüm modelinde seçili sekmeyi takip etmeye çalışıyorum ama çalışmayı başaramıyorum.

Aşağıdaki kodda bir sekmeyi tıklattığınızda, başlık doğru şekilde güncellenir ancak sekmenin içeriği görüntülenmez. , click: $parent.selectSection'u kaldırırsanız, içerik gösterilir, ancak başlık güncellenmez.

data-bind="css: { active: selected }"'u li'dan kaldırırsanız, sekmeleri tıklattığınızda ancak ikinci sekmeyi seçmek için düğmenin çalışmadığı görülüyor.

Bu işi nasıl yapabilirim?

Bkz: 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

bu kullanarak Bootstrap adlı JS işlemek ya da sadece Nakavt eklemek suretiyle/kaldırabilirsiniz çeşitli yolları vardır active sınıfı.

Bunu yalnızca Knockout ile yapmak için, burada, Bölümün kendisinin seçili olup olmadığını belirlemek için hesaplandığı bir çözüm var.

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()); 

Biçimlendirme olmazdı gibi: Burada

<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> 

Numune: http://jsfiddle.net/rniemeyer/cGMTV/

Orada kullanabilirsiniz varyasyonlarının bir dizi, ama ben bu basit bir yaklaşım olduğunu düşünüyorum.

Burada, etkin sekmenin bölüm adını şablon olarak kullandığı bir ince ayardır: http://jsfiddle.net/rniemeyer/wbtvM/