1

我正在尝试制作一个 crossFadeVisible bindingHandler。主要思想是，当我们设置一个值时，我希望它淡入。如果我们清除该值（即设置为 null），我希望它淡出，如果我们更改值，我想让它淡出旧值，淡入新值。

我下午的大部分时间都在为此奋斗，所以我不完全确定这是否可能。

我决定按照我看到其他人的做法，为此创建一个jsfiddle ( http://jsfiddle.net/jrstarke/4DTFq/20/ )。

最初该值是未定义的，但如果您点击 Set，我们将值设置为 1，并添加一些新按钮。如果您现在清除该值，它会按预期消失，并且再次设置它可以正常工作。如果你点击增量，一切都会按预期工作。

现在我无法解释的部分。如果显示“2”，您点击增量，则没有任何反应。清除，按钮消失（因为我们现在已经清除了原始值）。但显示值保持不变。

似乎发生了什么，我无法解释，是当我们调用将value.displayed(value())新的显示值设置为当前值时，它会导致立即再次调用更新方法（？），此时我们运行该方法完全，并且它按预期更新，但似乎我们已经解除了更改的值，因为这个更新方法永远不会被再次调用。

任何人都知道如何解决这个问题，或者我想要做的事情是否可行？

4

1 回答 1

2

问题是处理程序的更新代码永远不会在第一个fadeOut. 原因是依赖跟踪代码没有检测到您的绑定依赖，value因为它从未被实际读取。因此，当值确实得到更新时，绑定永远不会重新触发。

为什么会发生这种情况是因为在postFade更新绑定时没有调用代码。它实际上在完成后被调用fadeOut。它在最初更新时更新，因为该postFade函数在错误时value.displayed被调用。

解决此问题的一种简单方法value是在调用更新代码时读取某处。您不必对值做任何事情，只需尝试读取它即可。

update: function(element, valueAccessor) {
    var value = valueAccessor();

    var postFade = function() {
        // postFade depends on `value`
        value.displayed(value());
        if (value.displayed()) $(element).fadeIn('fast');
    }

    if (value.displayed()) {
        // postFade is invoked later after the fade out
        $(element).fadeOut('fast', postFade);
        // dependent on `value.displayed`

        // get the value so the dependency tracking code
        // detects that the binding depends on it
        value();
    }
    else {
        // postFade is invoked immediately
        postFade();
        // dependent on `value.displayed` and `value`
    }
}
于 2012-10-21T06:41:02.133 回答