Knockoutjs - Transitions between dynamic template switching?

KnockoutJS is really great to use so far, but I'm new to the framework. I am trying to create a tabbed interface for example. 4 links and a common display area. Clicking on the link uses the knockout template system and switches the template. This works fine, but I want to add some animation between the transition of the template.

How can i do this? I read a little about this earlier than in Remove / afterAd, but this seems to only apply to observable arrays. I know that KnockoutJS supports animation / user bindings (I use them more directly for other elements on my page).

If my whole approach is wrong, is there a better way to make a tabbed interface to easily get transitions?

Here is my code right now.

HTML:

<div class="Page">
    <span data-bind="template: {name: current_page()}"></span>
</div>
<script type="text/html" id="Home">
    <!-- Home content -->
</script>
<script type="text/html" id="Tab1">
    <!-- Tab1 content -->
</script>

Javascript ( ViewModel):

this.current_page  = ko.observable("Home")
//later on...
this.current_page("Tab1");
+5
1

afterRender :

<span data-bind="template: {name: current_page(), afterRender: animatePageChange }"></span> 

.., , :

animatePageChange: function() { $('#content').hide(); $('#content').fadeIn(3000); }

http://jsfiddle.net/unklefolk/v3JMS/1/

+9

All Articles