0

我正在尝试在以下场景中使用 Knockout：我有 jquery UI 选项卡和 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));

我想删除选项卡插件的“选​​择”事件，并以一种使 selectedTab 属性自动更新的方式使用 Knockout。
那可能吗？

4

2 回答 2

0

我已经整理了一个小提琴，我认为它可以满足您的需求。您需要在每个标签上添加点击绑定。这允许您跳过任何事件代码。点击处理程序代码是

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

这将替换您的事件代码。

它位于http://jsfiddle.net/photo_tom/p6dW6/6/

于 2012-10-21T14:59:45.500 回答
0

我所做的与您的答案相似，但代码较少。我没有在每个选项卡上添加点击事件，而是将事件移动到模型中。我创建了一个获取 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);
};
于 2012-10-21T17:25:32.987 回答