我已经实现了这样的绑定:
<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,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 },"swing");
console.log("aRight Called: newRight - " + newRight + ",duration - " + duration);
}
};
因此,当我们更改除两个自定义绑定observable之外的observable时,问题就出现了,例如zindex.
如果我们更改了可观察的zindex,那么值会在DOM中正确更新,但由于某种原因,我的aRight绑定也会被触发!…
我的aRight自定义绑定中没有任何引用,所以肯定不能依赖它?
当我的aWidth绑定也被触发时,我的aRight绑定也会被触发,这也有点奇怪!
有没有人对此有任何想法?
非常感谢!
安迪.
更新
这是更新索引的视图模型的一部分,当导致我的aRight自定义绑定触发时(顺便说一下这是非常多的psudo代码!):
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
他说:
Additionally,a binding will have its update function run again,if
another binding in the same data-bind attribute is triggered as well.
这是否意味着我所看到的是,当触发data-bind属性中的任何其他绑定时,我的自定义绑定被触发(这恰好可能是zindex是我看到的第一个更改)?这不是有点奇怪/错吗?……
更新
我有一个简单的小提琴,我认为这几乎总结了我的问题.似乎任何绑定在相同的数据绑定属性上的自定义绑定都会导致它更新!
http://jsfiddle.net/J6EPx/2/
嗯…我猜我必须通过手动检查我的自定义绑定来解决它是否实际改变了值!这不会破坏绑定的实际点吗???
我还在Knockout论坛上发布了一个更精确的问题:http://groups.google.com/group/knockoutjs/browse_thread/thread/d2290d96e33f1d5a
解决方法
在创建有助于缓解此行为的自定义绑定时,可以使用不同的模式.您可以在“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/