Jquery UI tab init sau khi thay đổi mảng trong knockoutjs

Question

Từ những gì tôi đã làm trong quá khứ (trước khi sử dụng knockoutjs) tôi sẽ gọi các tab() chức năng bất cứ lúc nào tôi cập nhật xem trên một trang. Tôi đang cố gắng để làm điều này trên một trang knockoutjs tôi đã làm. Mỗi khi tôi thay đổi mảng quan sát nó de-initializes các tab jquery. Được rồi, tôi sẽ gọi hàm. Điều này dường như không làm gì cả.

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

Vì một số lý do, nó hoạt động tốt khi tôi khởi tạo trang.

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

    }); 

Có điều gì tôi thiếu ở đây không? Cảm ơn vì bất kì sự giúp đỡ.

Answer 1

Lộ trình cho các tab Giao diện người dùng jQuery cho thấy rằng chúng sẽ thêm phương thức refresh giúp dễ dàng hơn.

Khi tôi kết hợp KO với các tab giao diện người dùng jQuery, tôi đã dựa vào việc hủy và khởi tạo lại các tab bất cứ khi nào quan sát của tôi thay đổi.

tôi sử dụng một tùy chỉnh ràng buộc để làm như thế này:

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

Khi bạn sử dụng các ràng buộc, bạn sẽ vượt qua observableArray của bạn với nó. Tùy chọn, bạn có thể chuyển tùy chọn cấu hình cho các tab trong liên kết bổ sung jqTabOptions. Các ràng buộc không cố gắng để thiết lập lại chỉ mục được lựa chọn trở lại nơi nó bắt đầu khi tái tạo nó. Dựa trên mã của bạn, bạn có thể không muốn thực hiện phần này.

Đây là mẫu: http://jsfiddle.net/rniemeyer/rcqT4/