knockout.js动画的声明性链接？

Question

在尝试使用效果调整knockout.js UI时,我发现我经常有几个基于条件交替的部分.这样的示例可以是列表视图中的详细信息窗格,其在未选择元素时显示指令.这可以很好地使用可见绑定声明 - 但是当你试图在混合中添加动画时,它会失败,因为没有显示/隐藏动画的链接.

我在这里简化了动画knockout.js示例来演示:

http://jsfiddle.net/yq5rS/

虽然我可能会破解某些东西,但我正在寻找一种更为惯用的knockout.js做这种链接的方式.

我考虑了一些解决方案:

• 拥有一个带有自定义绑定的容器元素,该自定义绑定捕获条件以及在开启和关闭状态下显示的元素.
• 使"动画可见"绑定依赖于条件和检查其他元素是否被隐藏的函数.

编辑:要清楚,我希望在另一个元素的淡入之前淡出一个元素.谢谢乔希.

Answer 1

此方法创建一个计算的可观察量，该可观察量查看布尔可观察量以确定要显示的文本。

\n\n

这是一个正在工作的 jsfiddle。http://jsfiddle.net/yq5rS/10/

\n\n

这是代码的快速思路

\n\n

网页

\n\n

<div class=\'liveExample\'> \n    <p> \n        <label>\n            <input type=\'checkbox\' data-bind=\'checked: display\' />\n            Active?\n        </label>\n    </p>\n\n    <p data-bind=\'fadeVisible: IsActive()\'></p>    \n</div>\xe2\x80\x8b\n

\n\n

脚本

\n\n

var Model = function() {\n    var self = this;\n    self.display= ko.observable(false);\n    self.IsActive = ko.computed(function() {\n        if (self.display()) return "Active."\n        return "Not active."\n    }); \n};\n\n\nko.bindingHandlers.fadeVisible = {\n    init: function(element, valueAccessor) {\n        var value = valueAccessor();\n        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();\n    },\n    update: function(element, valueAccessor) {\n        var value = valueAccessor();\n        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();\n    }\n};\n\nko.applyBindings(new Model ());\xe2\x80\x8b\n

\n\n

编辑

\n\n

我最初的响应没有淡出、等待，然后淡入。这是更新的 fadeVisible 绑定处理程序

\n\n

ko.bindingHandlers.fadeVisible = {\n    update: function(element, valueAccessor) {\n        var value = valueAccessor();\n        $(element).fadeOut(\'slow\', function () {\n            $(element).html(ko.utils.unwrapObservable(value)).fadeIn();\n        });\n    }\n};\n

\n