KnockoutJS has been really great to use so far, but I'm new to the framework. I'm trying to create a tabbed sort of interface, e.g. 4 links and a mon display area. Clicking on a link takes advantage of Knockout's templating system and will switch the template. This has been working great, but I want to add some kind of animation in between the template switching.

How can I acplish this? I've read a little bit about beforeRemove/afterAdd, but this only seems to apply to observableArrays. I know KnockoutJS supports animations/custom bindings (I'm using them more straightforwardly for other elements on my page).

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

Here is my code right now.

The 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>

The Javascript (Knockout's ViewModel):

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

KnockoutJS has been really great to use so far, but I'm new to the framework. I'm trying to create a tabbed sort of interface, e.g. 4 links and a mon display area. Clicking on a link takes advantage of Knockout's templating system and will switch the template. This has been working great, but I want to add some kind of animation in between the template switching.

How can I acplish this? I've read a little bit about beforeRemove/afterAdd, but this only seems to apply to observableArrays. I know KnockoutJS supports animations/custom bindings (I'm using them more straightforwardly for other elements on my page).

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

Here is my code right now.

The 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>

The Javascript (Knockout's ViewModel):

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

• javascript
• html
• knockout.js

Share Improve this question Follow asked May 28, 2012 at 18:08 SharkCopSharkCop 1,12022 gold badges1313 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can use the afterRender property of the template binding:

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

.. and then on your view model you can add whatever animation you fancy:

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

I have put together a simple demo at http://jsfiddle/unklefolk/v3JMS/1/