jquery - 如何使用knockout JS 添加或删除jQueryUI 选项卡？

Question

我一直在尝试使用 knockout 来添加/删除 jQueryUI 选项卡，但没有任何运气。我的 View 模型是 Effect 对象的数组。我希望在从 View 模型中添加/删除对象时从选项卡控件中添加/删除一个选项卡。

这是一个有人启动的 JSFiddle，我更新了它，它显示了我想要做什么 JSFiddle example

当您尝试添加选项卡时，它会中断。我认为我需要将模板绑定(bind)与新的自定义绑定(bind)结合起来，该绑定(bind)可以销毁/重新创建我认为的选项卡控件。我非常感谢任何帮助。谢谢!

Answer 1

我想我应该用对我开始使用的解决方案的新看法来更新这个问题。我之前一直使用 RP Niemeyer 的 fiddle http://jsfiddle.net/rniemeyer/dsKbH/作为动态添加/删除绑定(bind)到 KO observableArray 的 jQuery UI 选项卡的基础。

在过去的几个月里，我在我的应用程序中遇到了一些与 A) setTimeout() 延迟相关的问题，以及 B) 每次触发更新时销毁和重新创建选项卡小部件的问题。因此，我想出了一种不同的方法来避免这些问题，恕我直言，这是一种更优雅的技术。

http://jsfiddle.net/LatencyMachine/XJPJZ/

关键思想是引入一个名为“tabPanel”的非常简单的自定义绑定(bind)以及绑定(bind)到选项卡面板内容 div 的相应小部件。当 KO 根据您的 observableArray 创建和删除这些 div 时，tabPanel 绑定(bind)确保使用它的“刷新”方法更新 jQueryUI.tabs。我认为这比尝试让选项卡在容器元素的绑定(bind)中更新(并且在正确的时间)要顺利得多。

来自fiddle的相关代码

/**
KO Binding handler for a tabPanel div.  Use this on divs that can appear/disappear and/or have their id change 
depending upon an observable, usually an observableArray.
*/
ko.bindingHandlers.tabPanel = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {        
        $(element).tabPanel(ko.toJS(valueAccessor()));
    }
};

/**
This widget facilitates jQuery UI tabs that appear and disappear dynamically, usually as a result of MVVM like Knockout
Whenever this widget is created, the containing jQuery UI 'tabs' widget is refreshed so that it picks up the new tab
or drops the removed one.
This also facilitates dealing with id rename 'ripple' that occurs whenever a tab is removed due to the splice of an
observable array.
*/
$.widget("bw.tabPanel", {
    options: {
        id: null
    },

    _create: function() {
        this.element.hide();
        this.tabsElement = this.element.closest(".ui-tabs");        

        if(this.options.id) {
            this.element.attr({id: this.options.id});
        }
        this.refreshTabs();
    },

    _destroy: function() {
        if(this.options.id) {
            this.element.attr({id: ""});
        }
        this.refreshTabs();
    },

    _setOption: function(key, value) {
        var previousValue = this.options[key];
        if(previousValue == value) return;

        this.options[key] = value;

        switch(key) {
            case "id":
                this.element.attr({id: this.options.id});
                this.refreshTabs();
                break;
        }
    },

    /**
    Invoke refresh on the parent tab to let it know that something has changed.
    This also preserves the active index by setting it back to what it was before the refresh, which
    may correspond to a different tab after the refresh.
    */
    refreshTabs: function() {
        var previousActiveIndex = this.tabsElement.tabs("option", "active");
        this.tabsElement.tabs("refresh");
        this.tabsElement.tabs("option", "active", previousActiveIndex);        
    }
});