Encadenamiento declarativo de animaciones knockout.js?

Question

Al tratar de darle vida a una interfaz de usuario de knockout.js con efectos, he descubierto que a menudo tengo varias secciones que se alternan en función de un condicional. Un ejemplo de esto podría ser un panel de detalles en una vista de lista que muestra instrucciones cuando no se selecciona ningún elemento. Esto funciona de maravilla declarativamente usando el enlace visible, pero se queda corto cuando intentas agregar animaciones a la mezcla, ya que no hay encadenamiento de las animaciones mostrar/ocultar.

He simplificado la animación knockout.js ejemplo aquí para demostrar:

http://jsfiddle.net/yq5rS/

Mientras que probablemente podría piratear algo, yo estoy buscando una forma más knockout.js idiomática de hacer este tipo de encadenamiento

he considerado algunas soluciones:

• Tener un elemento contenedor con una unión a medida que captura el elemento condicional y para mostrar en el estados activado y desactivado.
• Tener el enlace "animación visible" depende tanto del condicional como de una función que comprueba si el otro elemento está oculto.

Editar: Para ser claros, quiero que el fundido de un elemento pase antes que el fundido del otro. Gracias Josh.

Answer 1

Este enfoque crea un observables computarizada que se ve a lo observable booleano para determinar el texto a visualizar.

Aquí hay un jsfiddle de trabajo.http://jsfiddle.net/yq5rS/10/

y aquí está una idea rápida del código

HTML

<div class='liveExample'> 
    <p> 
     <label> 
      <input type='checkbox' data-bind='checked: display' /> 
      Active? 
     </label> 
    </p> 

    <p data-bind='fadeVisible: IsActive()'></p>  
</div>​ 

Scripts

var Model = function() { 
    var self = this; 
    self.display= ko.observable(false); 
    self.IsActive = ko.computed(function() { 
     if (self.display()) return "Active." 
     return "Not active." 
    }); 
}; 


ko.bindingHandlers.fadeVisible = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn(); 
    }, 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn(); 
    } 
}; 

ko.applyBindings(new Model());​ 

EDIT

Mi respuesta inicial no se desvanecen, espera, y luego hizo desvanecerse. Aquí es un controlador actualizado vinculante fadeVisible

ko.bindingHandlers.fadeVisible = { 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     $(element).fadeOut('slow', function() { 
      $(element).html(ko.utils.unwrapObservable(value)).fadeIn(); 
     }); 
    } 
}; 

Answer 2

Un enfoque que podría funcionar para usted es mostrar dos elementos en el mismo espacio y alternar entre ellos, apegarse a un elemento y usar un enlace personalizado que lo atenúa, intercambia el contenido y luego lo vuelve a fundir Creo que esto funcionaría muy bien para su caso trivial relacionado con jsfiddle.

Eche un vistazo a Ryan Niemeyer's blog y el JSFiddle vinculado. La forma en que se desvanece cambia el total observable calculado parece aplicable a su ejemplo de intercambio de divs.

Sé que probablemente tenga tareas más complicadas que simplemente alternar entre dos divisiones ... pero podría haber una forma de extender la solución a un caso más general. No soy un experto en plantillas, pero ¿has trabajado mucho con ellos? En particular, la sintaxis template { name: function() {} } para dynamically changing templates?

(supongo que esto oficialmente me hace un Fanboy Niemeyer, pero no estoy avergonzado :-P)