3

我有这两个使用相同初始化代码的绑定，并且绑定到相同的值，但它们的初始化不同。第一个运行正常，第二个运行更新而不是 init。以下是绑定：

    function initToggle(element, valueAccessor) {
    // Initially set the element to be instantly visible/hidden depending on the value
    var value = valueAccessor();
    $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
};

//Binding Handlers
ko.bindingHandlers.fadeVisible = {
    init: initToggle,
    update: function (element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

ko.bindingHandlers.slideVisibleVertical = {
    init: initToggle,
    update: function(element, valueAccessor, allBindingsAccessor) {        
        var value = valueAccessor(); //Lastest binding value
        var allBindings = allBindingsAccessor(); //other bindings, allows options

        var valueUnwrapped = ko.utils.unwrapObservable(value); 
        var duration = allBindings.slideDuration || 400; // 400ms is default duration unless otherwise specified

        if (valueUnwrapped == true)
             $(element).show('slide', {direction: 'up'}, duration);
        else
            $(element).hide('slide', {direction: 'up'}, duration);
    }
};

从字面上看，相同的初始化函数。这是一个显示两个按钮的小提琴，它们都绑定到相同的值。fadeVisible如图所示开始，但slidevisibleVertical滑入。更新时两者都动画。有人知道这里发生了什么吗？

4

2 回答 2

4

该update函数也总是第一次运行。

因为你fadeVisible的元素已经可见，所以淡入它不会做任何事情。

对于调用slide它的其他绑定仍然会为其设置动画，即使它已显示。

您可以通过一些不同的方式来处理它：

  • 在元素 ($data) 上存储一些内容以表明您处于第一次通过并在更新结束时将其清除（反之亦然）
  • 在滑动前检查可见性（正如您在评论中提到的）
于 2012-06-06T21:39:32.177 回答
1

为了澄清接受的答案关于在元素（$data）上存储一些东西的评论，这里是示例代码：

ko.bindingHandlers.myHandler = {
    init: function (element, valueAccessor) {
        $(element).data("isFirstPass", true);
    },
    update: function (element, valueAccessor) {
        // Always unwrap so that ko tracks the dependency
        ko.unwrap(valueAccessor());

        if ($(element).data("isFirstPass")) {
            $(element).removeData("isFirstPass")
        }
        else {
            // Do something cool
        }
    }
};
于 2015-11-20T17:53:02.177 回答