Knockout.js 数组过滤器语法

Knockout.Js Array filter syntax

本文关键字：语法 过滤器 数组 js Knockout      更新时间：2023-09-26

刚刚进入javascript和淘汰赛.js。我找到了很多我想要完成的事情的例子。我觉得我可能忽略了一个小的语法错误。我正在尝试通过 ajax/json 过滤已经从服务器返回的集合（this.tasks）。我工作正常。我想做的是让用户能够在完成和未完成的任务之间切换。

我将代码切换为仅在任务上运行foreach循环过滤。"this.done"要么是真的，要么是假的。

任务模板

var taskModel = function(id, title, description, done){
    var self = this;
    this.id = ko.observable(id);
    this.title = ko.observable(title);
    this.description = ko.observable(description);
    this.done = ko.observable(done);
    this.showEdit = ko.observable(false);
    this.titleUpdate = ko.observable(false);
    this.descriptionUpdate = ko.observable(false);
};

页面模型

var pageModelTasks = function(){
    var self = this;
    this.task_title = ko.observable("");
    this.task_description = ko.observable("");
        this.task_title_focus = ko.observable(true);
    this.tasks = ko.observableArray([]);
    this.tasksFiltered = ko.computed(function() {
        return ko.utils.arrayFilter(this.tasks, function(Task) {
        return Task.done == true;
      });
    });
   // CRUD functions excluded 
};

这行不通。

对代码的两个小更正。首先，如@XGreen所述，您需要传递数组值，而不是 observableArray 实例，作为arrayFilter函数的第一个参数。最后，由于Task.done是可观察的，因此需要调用成员以获取值。下面是修改后的代码：

this.tasksFiltered = ko.computed(function() {
    return ko.utils.arrayFilter(this.tasks(), function(Task) {
        return Task.done() === true;
    });
});

第二个解决方案的方法 ko.utils.stringStartsWith 存在问题。

ko.utils.stringStarts与发布文件中缺失。

您可以使用以下代码：

  var stringStartsWith = function (string, startsWith) {          
        string = string || "";
        if (startsWith.length > string.length)
            return false;
        return string.substring(0, startsWith.length) === startsWith;
    };

请参阅问题链接

它可能会帮助你

if (myList().length > 0) {
    var text= this.filter().toLowerCase();
    return ko.utils.arrayFilter(myList(), function (item) {
                if (item.Label.toLowerCase().indexOf(text) > -1 || item.Desc.toLowerCase().indexOf(text) > -1) {
                    return true;
                 }
                 else {
                     return false;
                 }
          });
}
相关文章：