Question

我正在尝试在以下场景中使用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));

我想删除tabs插件的'select'事件，并以selectedTab属性自动更新的方式使用Knockout。
这可能吗？

Answer 1

我把一个小提琴放在一起，我觉得你想做什么。您需要在每个标记上添加单击绑定。这允许您跳过任何事件代码。点击处理程序代码是

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

这将取代您的活动代码。

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

Answer 2

我所做的与您的答案相似，但代码更少。我只是将事件移动到模型中，而不是在每个选项卡上添加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);
};

淘汰取决于价值的变化

2 个答案: