нокаут зависит от изменяющегося значения

Question

Я пытаюсь использовать нокаут в следующей ситуации: У меня есть вкладки пользовательского интерфейса jquery и кнопки Next/Prev. Я хочу, чтобы кнопки исчезли в соответствии с выбранной вкладкой - Next будет скрыт на последней вкладке, а Prev будет скрыт на первой вкладке. Вот что я сделал:

//HTML 
<div id="buttonsDiv"> 
    <button id="prevButton" data-bind="visible: prevVisible">Prev</button> 
    <button id="nextButton" data-bind="visible: nextVisible">Next</button> 
</div> 

//JavaScript 
function TabsButtons = function (tabsSize) { 
    //Computed 
    this.selectedTab = ko.computed(0); 

    this.nextVisible = ko.computed(function() { 
     return this.selectedTab() < tabsSize - 1; 
    }, this); 

    this.prevVisible = ko.computed(function() { 
     return this.selectedTab() > 0; 
    }, this); 
}; 

     var $tabs = this.tabs({ 
      select: function (event, ui) { 
       tabsButtonsModel.selectedTab(ui.index); 
      } 
     }); 

var tabsButtonsModel = new TabsButtons($tabs.find('.ui-tabs-panel').size()); 
ko.applyBindings(tabsButtonsModel, $('#buttonsDiv').get(0)); 

Я хотел бы, чтобы удалить «выбрать» событие вкладки плагина и использовать Knockout таким образом, что свойство selectedTab будет автоматически обновляться.
Возможно ли это?

Answer 1

То, что я сделал это похоже на ваш ответ, но меньше кода. Вместо добавления события click на каждой вкладке я просто перемещаю событие в модель. Я создал общую модель, которая получает элемент tabs и создает для него модель: function TabsPrevNextButtonsModel (tabs) { this.selectedTab = ko.observable (tabs.tabs ('option', 'selected'));

var tabsSize = tabs.find('.ui-tabs-panel').size(); 
    tabs.bind('tabsselect', $.proxy(function (event, ui) { 
     this.selectedTab(ui.index); 
    }, this)); 

    this.next = function (data, event) { 
     tabs.tabs('option', 'selected', (this.selectedTab() + 1) % tabsSize); 
    } 
    this.prev = function (data, event) { 
     tabs.tabs('option', 'selected', (this.selectedTab() - 1) % tabsSize); 
    } 

    //Computed 
    this.nextVisible = ko.computed(function() { 
     return this.selectedTab() < tabsSize - 1; 
    }, this); 

    this.prevVisible = ko.computed(function() { 
     return this.selectedTab() > 0; 
    }, this); 
}; 

Answer 2

Я собрал скрипку, которая, как я думаю, делает то, что вы хотите. Вам нужно добавить привязку клика для каждого из тегов. Это позволяет пропустить любой вызывающий код. Код обработчика кликов:

self.tabClick = function(data, ui) { 
    var currentidx = $("#tabs").tabs('option', 'selected'); 
    self.selectedTab(currentidx); 
} 

Это заменяет код события.

Это на http://jsfiddle.net/photo_tom/p6dW6/6/