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 common 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 accomplish 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");
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.net/unklefolk/v3JMS/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With