为什么我的 KnockoutJS 自定义绑定被触发？

Question

我遇到了一个奇怪的情况。基本上，我有两个自定义绑定，用于将 DOM 元素动画化为新值。它们是 aWidth 和 aRight，分别对宽度和右侧值进行动画处理。

我已经实现了这样的绑定：

<div class='classname' data-bind="aRight: right, aWidth: containerWidth, style: { zIndex: zindex, left: (left() + 'px'), height: (containerHeight() + 'px') }">

... 自定义绑定看起来像这样：

            ko.bindingHandlers.aWidth =
            {
                update: function (element, valueAccessor, allBindingsAccessor, context)
                {
                    // Get the value accessor
                    var value = valueAccessor();

                    // Get the new width and the duration of the animation
                    var newWidth = ko.utils.unwrapObservable(value);
                    var duration = 500;

                    $(element).animate({ width: newWidth }, duration, "swing");
                }
            };

            ko.bindingHandlers.aRight =
            {
                update: function (element, valueAccessor, allBindingsAccessor, context)
                {
                    // Get the value accessor
                    var value = valueAccessor();

                    // Get the new width and the duration of the animation
                    var newRight = ko.utils.unwrapObservable(value);
                    var duration = 500;

                    $(element).animate({ right: newRight }, duration, "swing");

                    console.log("aRight Called: newRight - " + newRight + ", duration - " + duration);
                }
            };

因此，当我们更改除我的两个自定义绑定可观察量之外的可观察量（例如 zindex）时，问题就会出现。

如果我们更改可观察的 zindex，该值会在 DOM 中正确更新，但由于某种原因，我的 aRight 绑定也会被触发！...

我的 aRight 自定义绑定中没有对它的任何引用，所以肯定可以'不是一种依赖吗？

当我的 aWidth 绑定也被触发时，我的 aRight 绑定也会被触发，这也有点奇怪！

有人对此有什么想法吗？

多谢！

安迪.

更新

这是视图模型中更新索引的部分，这会导致我的 aRight 自定义绑定触发（顺便说一句，这是非常伪代码！）：

    var page = function()
    {
        this.zindex = ko.observable(0);
        this.right = ko.observable(0);
        // and other observables....
    }

    var viewModel = function()
    {
        var pages = ko.oberservableArray();
        // populate the pages array etc...

        this.someMethod = function()
        {
            // Do some stuff...
            this.anotherMethod();
            // Do some other stuff
        }
        .bind(this);

        this.anotherMethod() = function
        {
            var pageCount = this.pages().length;
            for (var pageNum = 0; pageNum < pageCount; pageNum++)
            {
                var page = this.pages()[pageNum];
                page.zindex(/* a different value */); // This is what causes my aRight binding to fire...
            }
        }
        .bind(this);
    }

更新

我刚刚在这里读了一篇文章：http://groups.google.com/group/knockoutjs/browse_thread/thread/26a3157ae68c7aa5/44c96d1b748f63bb?lnk=gst&q=custom+binding+firing#44c96d1b748f63bb

说：

此外，如果 同一数据绑定属性中的另一个绑定也会被触发。

这是否意味着我所看到的是，当 data-bind 属性中的任何其他绑定被触发时，我的自定义绑定就会被触发（恰好 zindex 可能是我看到的第一个更改）？这不是有点奇怪/错误吗？...

更新

我有一个简单的小提琴，我认为它几乎概括了我的问题。似乎同一数据绑定属性上的任何绑定都与自定义绑定一样多，都会导致它更新！

http://jsfiddle.net/J6EPx/2/

嗯...我想我会有通过手动检查我的自定义绑定来解决该问题，以确定该值是否实际上已更改！这不会破坏绑定的实际点吗？？？

我还在 Knockout 论坛上发布了一个更精确的问题：http:// groups.google.com/group/knockoutjs/browse_thread/thread/d2290d96e33f1d5a

Answer 1

目前这是设计使然。当任何绑定触发时，数据绑定中的所有绑定都会被触发。这是因为它们都包装在单个 dependentObservable 中。在某些情况下，绑定之间存在依赖关系（如果更新了选项，则需要运行 value 以确保它仍然是有效值）。然而，在某些情况下，这确实会导致问题。

创建自定义绑定时可以使用一种不同的模式来帮助缓解这种行为。您实际上可以在“init”函数中创建自己的 dependentObservable，而不是在“update”函数中定义功能的核心。它看起来像：

ko.bindingHandlers.custBinding= {
    init: function(element, valueAccessor) {
        ko.dependentObservable({
            read: function() {
                ko.utils.unwrapObservable(valueAccessor());
                alert("custBinding triggered"); 
            },
            disposeWhenNodeIsRemoved: element
        });
    }
};

http://jsfiddle.net/rniemeyer/uKUfy/