在被 Knockout 移除之前，使用 CustomBindings 淡出 DOM 元素答案

【问题标题】：Use CustomBindings to fade out a DOM element before it is removed by Knockout在被 Knockout 移除之前，使用 CustomBindings 淡出 DOM 元素
【发布时间】：2012-10-30 14:15:29
【问题描述】：

使用 KnockoutJS 自定义绑定我试图在 DOM 元素被 Knockout 删除之前淡出它。我有一个JSFiddle example，当列表选择发生变化时，它当前的行为如下：

旧文字瞬间消失
新文本逐渐淡入。

但是，我想：

旧文字逐渐淡出
新文字逐渐淡入

这可能吗？我看不到对即将被删除的 DOM 元素进行操作的方法。以下 Update 方法仅在它们已被删除后（但在添加新的 DOM 元素之前）触发。

ko.bindingHandlers.fade= {
    update: function(element, valueAccessor) {
        $(element).hide().fadeIn(1500);
    }  
}

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

解决它的一种方法是不使用text 绑定，而不是您的自定义fade 绑定也应该处理文本的附加和删除。使用这种方法，您可以挂钩您的淡入/淡出逻辑。

所以你的fade 绑定应该是这样的：

ko.bindingHandlers.fade = {
    init: function(element, valueAccessor) { 
        // initially don't show the element        
        $(element).hide();        
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).fadeOut(500, function() {
            // set the text of the element, 
            // value needs to be defined outside of the fadeOut callback to work
            ko.utils.setTextContent(element, value);
            $(element).fadeIn(500);
        });
    }
};

及用法：

<div data-bind="fade: selectedName" class="main"></div>

一个演示JSFiddle。

【讨论】：

请注意，ko.utils.setTextContent(element, value) 在 Knockouts 公共 api 中不可用，因此无法在其压缩文件中使用，因此无法在我们的生产站点上使用。我把它换成了 $(element).text(value) 现在一切都好了。那只花了我一个小时的生命！