淘汰赛 observableArray 不更新 [英] Knockout observableArray not updating

问题描述

我有一个 observableArray，它不会在 HTML 中更新，即使我可以将它记录到控制台并查看它的变化.我希望 jsfiddle 有一个控制台，这样我就可以展示那部分.

在我发布的示例中，我有一个人员列表，然后我搜索该列表并尝试将结果添加到新的 observableArray.搜索结果 observableArray 永远不会在 HTML 中更新.

这是我的 Jsfiddle:http://jsfiddle.net/hMmgV/1/

这是我的代码:

function AppViewModel() {var self = this;self.people = ko.observableArray([{fName: "托马斯",lName:爱迪生"}, {fName: "莎莉",lName: "Salputrio"}, {fName: "爱德华",lName:闪耀"}, {fName: "雅各",lName:沃尔夫森"}]);self.searchResult = ko.observableArray([]);self.searchFieldKo = ko.observable("");self.submitSearch = 函数 () {如果(self.searchFieldKo()！="){self.searchResult().length = 0;$.each(self.people(), function (pKey, pObj) {$.each(pObj, 函数 (pProp, pValue) {如果 (pValue.toString().toLowerCase().indexOf(self.searchFieldKo().toLowerCase()) >= 0) {self.searchResult().push(self.people()[pKey]);console.log(self.searchResult());}})})} 别的 {alert("请输入内容.");}}}ko.applyBindings(new AppViewModel());

解决方案

您在

中有一组不必要的括号

self.searchResult().push(self.people()[pKey]);

应该是

self.searchResult.push(self.people()[pKey]);

演示 JSFiddle.

因为当您编写 self.searchResult() 时，您正在访问 observable 中的底层数组.当你推入该数组时，KO 不会收到有关更改的通知，因此你需要在 observableArray 本身上使用 push 方法.

顺便说一下，Knockout 有一组很棒的有用的数组助手可以简化您的过滤逻辑.

I have an observableArray that won't update in the HTML even though I can log it to the console and see it change. I wish jsfiddle had a console so I could show that part.

In the example I posted I have a list of people then I search across that list and try to add the results to a new observableArray. The search result observableArray never updates in the HTML.

Here is my Jsfiddle: http://jsfiddle.net/hMmgV/1/

Here is my code:

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());

解决方案

You have an unnecessary set of parenthesis in

self.searchResult().push(self.people()[pKey]); 

it should be

self.searchResult.push(self.people()[pKey]);

Demo JSFiddle.

Because when you write self.searchResult() you are accessing the underlaying array in the observable. And when you push into that array KO won't be notified about the changes so you need to use the push method on the observableArray itself.

By the way Knockout has a great set of useful array helpers which could simplify your filtering logic.

这篇关于淘汰赛 observableArray 不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！