Knockoutjs - 动态模板切换之间的转换？

Question

到目前为止,KnockoutJS的使用非常棒,但我是框架的新手.我正在尝试创建一个标签式界面,例如4个链接和一个公共显示区域.单击链接可以利用Knockout的模板系统并切换模板.这一直很好用,但我想在模板切换之间添加一些动画.

我怎么能做到这一点？我已经阅读了一些关于beforeRemove/afterAdd的内容,但这似乎只适用于observableArrays.我知道KnockoutJS支持动画/自定义绑定(我对我页面上的其他元素更直接地使用它们).

如果我的整个方法不正确,有没有更好的方法来做一个标签界面来轻松获得过渡？

这是我现在的代码.

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(Knockout的ViewModel):

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

Answer 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/上放了一个简单的演示