6

在尝试为带有效果的 knockout.js UI 增添趣味时，我发现我经常有几个部分根据条件交替出现。这方面的一个示例可能是列表视图中的详细信息窗格，该窗格在未选择任何元素时显示说明。这在使用可见绑定的情况下非常有效 - 但是当您尝试将动画添加到混合中时它会失败，因为没有显示/隐藏动画的链接。

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

http://jsfiddle.net/yq5rS/

虽然我可能会破解一些东西，但我正在寻找一种更惯用的 knockout.js 方式来进行这种链接。

我考虑了一些解决方案：

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

编辑：要清楚，我希望一个元素的淡出发生在另一个元素的淡入之前。谢谢乔希。

4

2 回答 2

3

这种方法创建了一个计算的 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();
        });
    }
};
于 2012-09-19T21:50:55.047 回答
0

一种可能适合您的方法不是在同一空间中显示两个元素并在它们之间切换，而是坚持使用一个元素并使用将其淡出、交换内容然后淡入的自定义绑定。我认为这会很好地为您链接 jsfiddle 的琐碎案例工作。

查看Ryan Niemeyer 的博客和链接的JSFiddle。他淡入淡出改变总计算可观察的方式似乎适用于您的交换 div 示例。

我知道您可能有更复杂的任务，而不仅仅是在两个 div 之间切换……但可能有一种方法可以将解决方案扩展到更一般的情况。我不是模板专家，但是您经常使用它们吗？特别是动态更改模板template { name: function() {} }的语法？

（我想这正式让我成为尼迈耶的粉丝，但我并不感到羞耻:-P）

于 2012-07-31T13:11:31.143 回答