在Knockout删除之前，使用CustomBindings淡出DOM元素

Question

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

• 旧文字立即消失
• 新文字逐渐消失。

但是，我想：

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

这可能吗？我无法看到一种方法来操作即将被删除的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。