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

从我过去所做的（在使用knockoutjs之前）我会在任何时候调用tabs（）函数更新页面上的视图。我试图在我做过的knockoutjs页面上做到这一点。每次我改变可观察数组，它都会初始化jquery选项卡。这很好，我只是调用函数。这似乎没有做任何事情。在knockoutjs中更改数组后，Jquery UI选项卡初始化

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

    });

有什么我在这里失踪？谢谢你的帮助。

来源

2011-11-08 Drew H

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/

来源

2011-11-08 21:09:24

嘿感谢。我几分钟前才发现需要通过摧毁并帮助我。我已经看到过一些你的绑定例子，但它们似乎并没有工作，但是确实如此。你的约束似乎是一个更优雅的解决方案。再次感谢您的帮助。你的淘汰赛大师。 –

+1然而，你的知识为我节省了一天的时间！ –

+1谢谢你，这不正是我所需要的，但让我更靠近！ –

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

回答

相关问题