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

Question

使用 KnockoutJS 自定义绑定(bind) 我试图在 DOM 元素被 Knockout 删除之前淡出它。我有一个 JSFiddle example当列表选择更改时，当前行为如下:

• 旧文本立即消失
• 新文本逐渐淡出。

不过，我想:

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

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

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

Answer 1

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

所以你的 fade 绑定(bind)应该是这样的:

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 .