到目前为止,KnockoutJS 非常好用,但我是该框架的新手。我正在尝试创建一个选项卡式的界面,例如4 个链接和一个公共(public)显示区域。单击链接可利用 Knockout 的模板系统并切换模板。这一直很好用,但我想在模板切换之间添加某种动画。
我怎样才能做到这一点?我读过一些关于 beforeRemove/afterAdd 的内容,但这似乎只适用于 observableArrays。我知道 KnockoutJS 支持动画/自定义绑定(bind)(我将它们更直接地用于页面上的其他元素)。
如果我的整个方法不正确,是否有更好的方法来制作标签式界面以轻松实现转换?
这是我现在的代码。
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");
最佳答案
您可以使用 template binding 的 afterRender
属性:
<span data-bind="template: {name: current_page(), afterRender: animatePageChange }"></span>
..然后在你的 View 模型上你可以添加任何你喜欢的动画:
animatePageChange: function() { $('#content').hide(); $('#content').fadeIn(3000); }
我在 http://jsfiddle.net/unklefolk/v3JMS/1/ 上整理了一个简单的演示
关于javascript - Knockoutjs - 动态模板切换之间的转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10788793/