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

Question

根据我过去的做法(在使用knockoutjs之前),我会在我更新页面上的视图时调用tabs()函数.我正试图在我做过的knockoutjs页面上这样做.每次我更改observable数组时,它都会取消初始化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发生更改,我就依赖于销毁和重新初始化选项卡.

我使用自定义绑定来执行此操作:

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

当您使用绑定时,您将把observableArray传递给它.(可选)您可以为jqTabOptions附加绑定中的选项卡传递配置选项.绑定会尝试将所选索引重置回重新创建它时启动的位置.根据您的代码,您可能不想这样做.

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