Javascript 为什么函数的行为类似于计算函数?
给定以下HTML/JS()Javascript 为什么函数的行为类似于计算函数?,javascript,knockout.js,computed-observable,Javascript,Knockout.js,Computed Observable,给定以下HTML/JS() $(函数(){ 函数ViewModel(){ var self=这个; self.users=[ {id:1,名字:“Bob”}, {id:2,名字:“大卫”}, {id:3,名字:“沃尔特”} ]; self.selectedId=ko.可观察(1); self.isSelected=函数(用户){ 返回user.id==self.selectedId()?“是”:“否”; }; self.onClick=函数(用户){ self.selectedId(用户i
$(函数(){
函数ViewModel(){
var self=这个;
self.users=[
{id:1,名字:“Bob”},
{id:2,名字:“大卫”},
{id:3,名字:“沃尔特”}
];
self.selectedId=ko.可观察(1);
self.isSelected=函数(用户){
返回user.id==self.selectedId()?“是”:“否”;
};
self.onClick=函数(用户){
self.selectedId(用户id);
}
};
应用绑定(新的ViewModel());
});
将显示一个列表。通过单击一行,该行的id存储在selectedId
中
我不明白,当
selectedId
被更改时,为什么会重新评估函数isSelected
。毕竟,这是不可计算的。为什么要重新评估它?发生这种情况是因为isSelected()
方法访问selectedId
属性(它是可观察的
)。考虑这一点:
HTML
<!-- adding into the foreach: block -->
<span data-bind="text: $root.someFunc()"></span>
<span data-bind="text: $root.someOtherFunc()"></span>
如您所见,这些函数之间的唯一区别在于,第一个函数确实检查定义为ko.observable
的模型属性的值。因此,每次更改self.selectedId
时,都会通知此函数(这实际上意味着它会重新运行)
请注意,如果删除相应的数据绑定
部分,此方法将不会在视图初始化阶段运行,因此无法注册为正确的观察者
第二个方法虽然也在初始化阶段调用,但不会尝试检查
selectedId
值-因此它没有注册为该值的观察者,并且随后也不会调用它。Knockout使用计算出的观察值来更新绑定。它是这样的(修改自):
因此,您为获取绑定值而访问的任何可观察对象都将成为此计算可观察对象的依赖项,并导致绑定更新。我确实理解。但是,在阅读文档之后,我不会这么想。那么,如果访问基本观察值的普通函数做了同样的事情,那么计算观察值的原因是什么呢?请看,
fullName
被编码为一个计算值。如果它被编码为一个普通函数,结果会不会是一样的呢?现在这个问题已经解决了。)击倒这样做很好。因此,可以编写对当前行中的数据进行操作的全局函数。该函数是否也可以编写为计算函数?我不知道如何将$数据交给计算机。
<!-- adding into the foreach: block -->
<span data-bind="text: $root.someFunc()"></span>
<span data-bind="text: $root.someOtherFunc()"></span>
// 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.computed({
read: function() {
bindingHandler.update(node, getValueAccessor(bindingKey), allBindings,
bindingContext.$data, bindingContext);
},
disposeWhenNodeIsRemoved: node
});