0

次のシナリオで Knockout を使用しようとしています: jquery UI タブと [次へ] / [前へ] ボタンがあります。選択したタブに応じてボタンを非表示にしたい - 次は最後のタブで非表示になり、前は最初のタブで非表示になります。これが私がやったことです：

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

タブ プラグインの「select」イベントを削除し、selectedTab プロパティが自動的に更新されるように Knockout を使用したいと考えています。
それは可能ですか？

4

2 に答える 2

0

私がやったことはあなたの答えに似ていますが、コードは少ないです。各タブにクリック イベントを追加する代わりに、イベントをモデルに移動するだけです。tabs 要素を取得してそのモデルを作成する汎用モデルを作成しました。

    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 に答える
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 に答える