Javascript 击倒js计算未被激发
该代码可在上找到 在FilterViewModel中,我创建了一个可观察的对象Javascript 击倒js计算未被激发,javascript,jquery,knockout.js,computed-observable,Javascript,Jquery,Knockout.js,Computed Observable,该代码可在上找到 在FilterViewModel中,我创建了一个可观察的对象 var FilterViewModel= ko.observable({ Name: ko.observable("test"), Code: ko.observable("test"), Number: ko.observable("test") }); 然后在BankViewModel中,我运行一个计算方法,当任何输入框发生变化时,它都会触发 var BankViewModel = f
var FilterViewModel= ko.observable({
Name: ko.observable("test"),
Code: ko.observable("test"),
Number: ko.observable("test")
});
然后在BankViewModel中,我运行一个计算方法,当任何输入框发生变化时,它都会触发
var BankViewModel = function(){
var self = this;
self.Collection = ko.observableArray([]),
self.filteredCollection = ko.computed(function () {
var filter = FilterViewModel();
alert("invoked");
}),
self.add = function (bankObject) {
self.Collection.push(bankObject);
},
self.isSelected = function (data) {
$('.bank').css('background-color', 'white');
$('.bank p').css('color', '#333');
$('#bank-row-' + data.Code()).css('background-color', 'blue');
$('#bank-row-' + data.Code()+" p").css('color', 'white');
}
};
出于某种原因,它没有被解雇。谁能帮我一下吗
感谢您的高级您需要用如下语句实例化视图模型:
var model = new BankViewModel();
当模型被实例化时,其计算方法将被初始评估。您的警报将在此处触发
但是,我假设您希望您的计算方法订阅名称、代码和数字属性。在这种情况下,您需要在计算方法中至少读取这些属性一次
这就是依赖项跟踪在KO中的工作方式。它会记录您在计算函数中提到的所有可观测值,并记录它们。当其中一个观测值被更新时,您的计算结果将再次被评估
对于上面的代码,您的计算机将订阅filtervewmodel
,但不订阅其单个属性Name
、code
和Number
。因此,如果需要订阅这些单独属性中的更改,则必须在计算函数中单独提及它们。好吧,如果它们不影响你的计算函数,让你的计算机订阅它们是没有意义的
如果您想了解该流程的工作原理,请查看其文档:
你的小提琴有几个问题:
您绑定到值而不是可观察值。编写
ko时使用global.filtervewmodel()的值。Name
不是可观察的值。因此没有真正的绑定(更新ko不会更新接口,更新接口不会更新ko)。您需要删除最后一个括号:global.filtervewmodel().Name
在绑定中输入名称而不是代码,反之亦然
您订阅了FilterViewModel的更改,但未订阅其子级可观察更改。要做到这一点,请在计算的可观察对象中包括对子可观察对象的评估:
-
您可以在这里进行测试我绕过了第一点,更改了我的值,但计算结果不会激发,正如您所提到的,尽管FilterViewModel正在更改,但它的子项未声明,因此计算结果不会激发。感谢您的帮助,因为这是我第一次使用knockout.js
self.filteredCollection = ko.computed(function () {
var filter = FilterViewModel();
if (filter.Name() != 'testname')
alert("name");
if (filter.Code() != 'testcode')
alert("code");
if (filter.Number() != 'testnumber')
alert("number");
}),