Jquery UI tab init después del cambio de matriz en knockoutjs

Question

Por lo que hice en el pasado (antes de usar knockoutjs) llamaría a la función tabs() cada vez que actualicé la vista en una página. Estoy tratando de hacer esto en una página de knockoutjs que he hecho. Cada vez que cambio la matriz observable, se des-inicializan las pestañas jquery. Está bien. Llamaré a la función. Esto no parece hacer nada.

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

Por alguna razón, funciona bien cuando estoy inicializando la página.

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

    }); 

¿Faltan algo aquí? Gracias por cualquier ayuda.

Answer 1

La hoja de ruta para las pestañas jQuery UI muestra que van a agregar un método refresh que lo haría más fácil.

Cuando he combinado las pestañas KO con jQuery UI, he confiado en la destrucción y reinicialización de las pestañas cada vez que cambia mi array observable.

Puedo utilizar una unión de encargo de hacer esto como:

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

Cuando se utiliza la unión, que pasaría a su observableArray a ella. Opcionalmente, puede pasar opciones de configuración para las pestañas en el enlace adicional jqTabOptions. El enlace intenta restablecer el índice seleccionado de nuevo a donde comenzó cuando se recrea. Según tu código, es posible que no quieras hacer esta parte.

Este es un ejemplo: http://jsfiddle.net/rniemeyer/rcqT4/