我有一个observableArray,它不会在HTML中更新,即使我可以将其记录到控制台并看到它发生变化。我希望jsfiddle有一个控制台,所以我可以展示那个部分。
在我发布的示例中,我有一个人员列表,然后我搜索该列表并尝试将结果添加到新的observableArray。搜索结果observableArray永远不会在HTML中更新。
这是我的Jsfiddle:http://jsfiddle.net/hMmgV/1/
这是我的代码:
function AppViewModel() {
var self = this;
self.people = ko.observableArray([{
fName: "Thomas",
lName: "Edison"
}, {
fName: "Sally",
lName: "Salputrio"
}, {
fName: "Edward",
lName: "Sparkleshine"
}, {
fName: "Jacob",
lName: "Wolfsson"
}]);
self.searchResult = ko.observableArray([]);
self.searchFieldKo = ko.observable("");
self.submitSearch = function () {
if (self.searchFieldKo() != "") {
self.searchResult().length = 0;
$.each(self.people(), function (pKey, pObj) {
$.each(pObj, function (pProp, pValue) {
if (pValue.toString().toLowerCase().indexOf(self.searchFieldKo().toLowerCase()) >= 0) {
self.searchResult().push(self.people()[pKey]);
console.log(self.searchResult());
}
})
})
} else {
alert("Please type something.");
}
}
}
ko.applyBindings(new AppViewModel());
答案 0 :(得分:10)
中有一组不必要的括号
self.searchResult().push(self.people()[pKey]);
应该是
self.searchResult.push(self.people()[pKey]);
因为当您编写self.searchResult()
时,您正在访问observable中的底层数组。当您进入该阵列时,KO将不会收到有关更改的通知,因此您需要在push
上使用observableArray
方法。
顺便说一句,Knockout有一套很好的useful array helpers可以简化你的过滤逻辑。