Question

I am trying to use Knockout in the following scenario:
I have jquery UI tabs and Next / Prev buttons. I would like the buttons to disappear according the to selected tab – the Next will be hidden in the last tab and the Prev will be hidden in the first tab. Here is what I’ve done:

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

I would like to remove the ‘select’ event of the tabs plugin and use Knockout in a way that the selectedTab property will updated automatically.
Is that possible?

Answer 1

What I have done is similar to your answer but less code. Instead of adding click event on each tab, I just move the event into the model. I created a generic model that gets the tabs element and creates a model for it:
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);
};