在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選項卡初始化

回答

相關問題