Question

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

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

http://jsfiddle.net/yq5rS/

虽然我可能会破解某些东西，但我正在寻找一种更为惯用的敲门.js做这种链接的方法。

我考虑了一些解决方案：

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

编辑：要清楚，我希望在另一个元素消失之前淡出一个元素。谢谢Josh。

Answer 1

此方法创建一个计算的observable，查看boolean observable以确定要显示的文本。

这是一个有效的jsfiddle。 http://jsfiddle.net/yq5rS/10/

这里是代码的快速概念

<强> HTML

<div class='liveExample'> 
    <p> 
        <label>
            <input type='checkbox' data-bind='checked: display' />
            Active?
        </label>
    </p>

    <p data-bind='fadeVisible: IsActive()'></p>    
</div>

<强>脚本

var Model = function() {
    var self = this;
    self.display= ko.observable(false);
    self.IsActive = ko.computed(function() {
        if (self.display()) return "Active."
        return "Not active."
    }); 
};


ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        $(element).hide().html(ko.utils.unwrapObservable(value)).fadeIn();
    }
};

ko.applyBindings(new Model ());

修改

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

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

Answer 2

可能对您有用的一种方法是在同一空间中显示两个元素并在它们之间切换，坚持使用一个元素并使用淡化它的自定义绑定，交换内容然后将其淡入.I我认为这样可以很好地处理与jsfiddle有关的琐碎案例。

查看Ryan Niemeyer's blog和关联的JSFiddle。他淡化的方式改变了总计算的observable似乎适用于你的交换divs例子。

我知道你可能有更复杂的任务，而不仅仅是在两个div之间切换......但是可能有办法将解决方案扩展到更一般的情况。我不是模板专家，但你和他们一起工作过多吗？特别是dynamically changing templates的template { name: function() {} }语法？

（我想这正式让我成为Niemeyer Fanboy，但我并不感到羞耻:-P）

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

2 个答案: