Karta Jquery UI init po zmianie tablicy w knockoutjs

Question

Z tego, co zrobiłem w przeszłości (przed użyciem knockoutjs) wywoływałbym funkcję tabs() w każdej chwili, gdy aktualizowałam widok na stronie. Próbuję to zrobić na stronie knockoutjs, którą zrobiłem. Za każdym razem, gdy zmieniam tablicę obserwowalną, deinicjalizuje ona karty jquery. W porządku, po prostu zadzwonię do tej funkcji. To chyba nic nie robi.

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

Z jakiegoś powodu działa poprawnie, gdy inicjuję stronę.

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

    }); 

Czy jest tu coś, czego mi brakuje? Dzięki za pomoc.

Answer 1

Mapa drogowa dla zakładek jQuery UI pokazuje, że zamierzają dodać metodę, która ułatwiłaby tę metodę.

Kiedy połączyłem KO z zakładkami jQuery UI, polegałem na niszczeniu i reinicjowaniu zakładek za każdym razem, gdy zmieni się moja obserwowalna tablica.

używam zwyczaj wiązania to zrobić tak:

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

Podczas korzystania wiązania, by zdać observableArray do niego. Opcjonalnie można przekazać opcje konfiguracyjne dla zakładek w dodatkowym powiązaniu jqTabOptions. Wiązanie próbuje zresetować wybrany indeks z powrotem do miejsca, w którym zostało uruchomione podczas jego odtwarzania. Na podstawie Twojego kodu możesz nie chcieć wykonywać tej części.

Oto przykład: http://jsfiddle.net/rniemeyer/rcqT4/