javascript - 在被 Knockout 移除之前使用 CustomBindings 淡出 DOM 元素

Question

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

• 旧文字瞬间消失
• 新的文字逐渐淡出。

但是，我想：

• 旧文字逐渐淡出
• 新的文字逐渐淡出

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

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

Answer 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。