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

【问题标题】：Knockoutjs - Transitions between dynamic template switching?Knockoutjs - 动态模板切换之间的转换？
【发布时间】：2012-06-03 01:34:12
【问题描述】：

到目前为止，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");

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

您可以使用template binding 的afterRender 属性：

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

.. 然后在你的视图模型上你可以添加任何你喜欢的动画：

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

我在http://jsfiddle.net/unklefolk/v3JMS/1/做了一个简单的演示

【讨论】：

是否有一种干净的方法可以通过自定义绑定来做到这一点？我见过 fadeVisible 和 slideVisible 绑定，但在向导/工作流中使用它们的问题是您只想在当前模板被隐藏后显示新模板
很好的答案，感谢 jsFiddle。我添加了一些简单的切换逻辑，因此您可以按住按钮多次查看转换，而无需重新加载页面。在这里更新了 jsFiddle：jsfiddle.net/v3JMS/12
@ClearCloud8，更新了jsfiddle上的外部资源