[英]why does the event listener in this throttling function behave like that?
[英]Why does a function behave like a computed?
给出以下HTML / JS( http://jsfiddle.net/mgs_jsfiddle/gUhm2/ )
<div data-bind="foreach: users">
<p data-bind="click: $root.onClick">
<span data-bind="text: id"></span>
<span data-bind="text: firstName"></span>
<span data-bind="text: $root.isSelected($data)"></span>
</p>
</div>
$(function() {
function ViewModel() {
var self = this;
self.users = [
{ id: 1, firstName: "Bob" },
{ id: 2, firstName: "David" },
{ id: 3, firstName: "Walter" }
];
self.selectedId = ko.observable(1);
self.isSelected = function(user) {
return user.id === self.selectedId() ? "YES" : "NO";
};
self.onClick = function(user) {
self.selectedId(user.id);
}
};
ko.applyBindings(new ViewModel());
});
显示一个列表。 通过单击一行,行的id将存储到selectedId
。
我不明白,当selectedId
被更改时,为什么重新评估函数isSelected
。 毕竟,这是没有计算的。 为什么要重新评估呢?
这是因为isSelected()
方法访问selectedId
属性( observable
)。 考虑一下:
HTML
<!-- adding into the foreach: block -->
<span data-bind="text: $root.someFunc()"></span>
<span data-bind="text: $root.someOtherFunc()"></span>
JS
// adding to a model definition
self.someFunc = function() {
self.selectedId();
console.log('I AM AN OBSERVER');
return 'oi: ' + Math.random();
};
self.someOtherFunc = function() {
// self.selectedId();
console.log('AND I AM NOT');
return 'no: ' + Math.random();
}
小提琴 。
如您所见,这些函数之间的唯一区别是第一个函数检查定义为ko.observable
的模型属性的值。 因此,每次更改self.selectedId
,都会通知此函数(这实际上意味着重新运行)。
请注意,如果删除相应的data-bind
部分,则此方法将不会在视图初始化阶段运行,因此无法注册为正确的观察者。
第二种方法,虽然也在初始化阶段调用,但不会尝试检查selectedId
值 - 因此它没有注册为此值的观察者,并且不会随后调用它。
Knockout使用计算的observable来更新绑定。 它是这样的(从bindingAttributeSyntax.js修改):
ko.computed({
read: function() {
bindingHandler.update(node, getValueAccessor(bindingKey), allBindings,
bindingContext.$data, bindingContext);
},
disposeWhenNodeIsRemoved: node
});
因此,您访问以获取绑定值的任何可观察对象都将成为此计算可观察对象的依赖关系,并导致绑定更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.