knockoutjs 中数组更改后 Jquery UI 选项卡初始化

Question

根据我过去所做的(在使用knockoutjs之前)，每当我更新页面上的 View 时，我都会调用tabs()函数。我正在尝试在我已经完成的knockoutjs 页面上执行此操作。每次我更改可观察数组时，它都会取消初始化 jquery 选项卡。没关系，我只需调用该函数即可。这似乎没有做任何事情。

    var viewModel = {       

    lines: ko.observableArray([]),      
    activeTab: ko.observable(),         
    addLine : function() {  

        var self = this;            
        $.post('/add/line', {customer_id : customer_id } , function(data) {                 
            var line = ko.toJS(data);               
            self.lines.push(new Line(line.id, line.name, line.equipType, line.model, line.height, line.length, line.loadsWeek, line.weight, line.width, line.pallets));

            $("#lineTabs").tabs({ selected: 0 });
            $(".palletTabs").tabs({ selected: 0 });             
        });     
    }
};

出于某种原因，当我初始化页面时它工作正常。

$.getJSON("/json/all/lines", { customer_id : customer_id } , function(data) {       

        var mappedData = ko.utils.arrayMap(data, function(line) {               
            return new Line(line.id, line.name, line.equipType, line.model, line.height, line.length, line.loadsWeek, line.weight, line.width, line.pallets)        
        });

        viewModel.lines(mappedData);        

        $("#lineTabs").tabs({ selected: lineTabIndex });
        $(".palletTabs").tabs({ selected: 0 });

    }); 

我在这里缺少什么吗？感谢您的帮助。

Answer 1

jQuery UI 选项卡的路线图表明，他们将添加一个 refresh 方法，这将使这变得更容易。

当我将 KO 与 jQuery UI 选项卡结合使用时，只要 observableArray 发生更改，我就会销毁并重新初始化选项卡。

我使用自定义绑定(bind)来执行此操作，如下所示:

ko.bindingHandlers.jqTabs = {
    update: function(element, valueAccessor, allBindingsAccessor) {
       var dependency = ko.utils.unwrapObservable(valueAccessor()),
           currentIndex = $(element).tabs("option", "selected") || 0,
           config = ko.utils.unwrapObservable(allBindingsAccessor().jqTabOptions) || {};

        //make sure that elements are set from template before calling tabs API
        setTimeout(function() { 
            $(element).tabs("destroy").tabs(config).tabs("option", "selected", currentIndex);
       }, 0);
    }
};

当您使用绑定(bind)时，您会将 observableArray 传递给它。或者，您可以在 jqTabOptions 附加绑定(bind)中传递选项卡的配置选项。绑定(bind)确实会尝试将所选索引重置回重新创建索引时开始的位置。根据您的代码，您可能不想执行此部分。

这是一个示例: http://jsfiddle.net/rniemeyer/rcqT4/