javascript - KnockoutJS arrayFilter 不更新

标签 javascript knockout.js

这里是 knockout 新手。我尝试使用 ko.utils.arrayFilter 但当我使用它时它似乎没有更新。我使用与 arrayForEach 相同的方法,所以我不确定这里出了什么问题。使用 arrayFilter 时如何获取要更新的列表?

JS:

function entry(name, category) {
    this.name = ko.observable(name);
    this.category = ko.observable(category);
}

function entriesModel() {
    this.entries = ko.observableArray([]);
    this.filter = function () {
        ko.utils.arrayFilter(this.entries(), function (item) {
            return item.category == 'SciFi';
        });
    };
    this.sort = function () {
        this.entries.sort(function (a, b) {
            return a.category < b.category ? -1 : 1;
        });
    };
}

$(document).ready(function () {
    $.getJSON("entries.php", function (data) {
        entries(data);
    });
    ko.applyBindings(entriesModel());
});

HTML:

<ul data-bind="foreach: entries">
<li>
    <p data-bind="text: name"></p>

    <p data-bind="text: category"></p>
</li>

<button data-bind="click: filter">Filter</button>
<button data-bind="click: sort">Sort</button>

JSON:

[{"id":"1","name":"Iron Man","category":"SciFi"},{"id":"2","name":"Terminator","category":"SciFi"},{"id":"3","name":"The Pianist","category":"Drama"},{"id":"4","name":"The Hangover","category":"Comedy"}]

最佳答案

不确定这是否正是您想要的,但是您的过滤函数不会执行就地过滤,因此您需要使用新的过滤数组重新分配 observableArray。比如

this.filter = function () {
    this.entries(ko.utils.arrayFilter(this.entries(), function (item) {
        return item.category == 'SciFi';
    }));
};

请参见此处:http://jsfiddle.net/aKfUc/1/

如果您不想永久更改数组,您可能需要使用 ko.compulated observable:

http://knockoutjs.com/documentation/computedObservables.html

关于javascript - KnockoutJS arrayFilter 不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18809400/

相关文章:

javascript - 如何使用 match() 分割数组中的行?

knockout.js - 如何获取使用特定 knockout 绑定(bind)的所有元素的列表?

knockout.js - 设置 Knockout ViewModel 进行验证

javascript - 在 Nest.js 中,如何在装饰器中获取服务实例?

javascript - Angular 依赖注入(inject)

javascript - 在 Jquery 中切换/添加/删除类未按预期工作

javascript - 使用 Google Analytics 重定向页面

javascript - 从 knockout View 模型访问 html 元素

javascript - 超时后调用 Knockout JS Extender 函数

javascript - 将对象推送到 observableArray