Следить за вкладками с knockoutjs + twitter bootstrap

Question

Я пытаюсь отслеживать выбранную вкладку в модели представления, но я не могу заставить ее работать.

В следующем коде при нажатии вкладки заголовок будет обновляться правильно, но содержимое вкладки не отображается. Если вы удалите , click: $parent.selectSection, тогда содержимое будет показано, но заголовок не обновится.

Теперь, если вы удалите data-bind="css: { active: selected }" из li, то, похоже, он работает, когда вы нажимаете вкладки, но кнопка для выбора второй вкладки - нет.

Как это сделать?

См: 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 этого либо с помощью Bootstrap или просто имея Нокаут добавить/удалить класс 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/