Declarative animation chain knockout.js?

Question

In an attempt to revive the knockout.js user interface with effects, I found that I often have several sections that alternate based on the conditional. An example of this is a list pane that displays instructions when no items are selected. This works fine using visible binding, but it doesn't work when you try to add animations to the mix, as there is no show / hide animation chain.

I simplified the knockout.js animation example to demonstrate:

http://jsfiddle.net/yq5rS/

Although I could hack something, I am looking for a more idiomatic knockout.js method for this kind of chaining.

I reviewed several solutions:

• The presence of a container element with a user binding that captures the condition and which element will be displayed in the on and off states.
• The presence of the "animation visible" binding depends on both the conditional and the function, which checks whether another element is hidden.

Edit: To be clear, I want the disappearance from one element to occur before the other disappears. Thanks to Josh.

Answer 1

This approach creates a computed observation that refers to the logical observable to determine which text will be displayed.

This is where jsfiddle works. http://jsfiddle.net/yq5rS/10/

And here is a brief description of the code

Html

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

Scenarios

 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

My original answer did not disappear, wait, and then fades out again. Here is the updated fadeVisible binding handler

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

Answer 2

One approach that might work for you is instead of displaying two elements in the same space and switching between them, stick to one element and use a custom snap that disappears, swaps the content and then disappears. think this will work well for your trivial jsfiddle case.

Take a look at Ryan Niemeyer's blog and related JSFiddle . The way it disappears changes the overall calculated observable, it seems to apply to your summary example divs.

I know that you probably have more complex tasks than just switching between two divs ... but there may be a way to extend the solution to a more general case. I'm not a template expert, but have you worked with them a lot? In particular, the syntax of template { name: function() {} } for dynamically changing templates ?

(I think it officially makes me a fan of Niemeyer, but I'm not ashamed :-P)