javascript - Knockout.Js Array filter syntax - Stack Overflow

admin管理员组

文章数量:1244397

Just getting into javascript and knockout.js. I've found a bunch of examples of what I'm trying to acplish. And I feel like there is a small syntax error I may be overlooking. I'm trying to filter a set already returned (this.tasks) from a server via ajax/json. I have that working fine. What I would like to do, is have users be able to switch between plete and inplete tasks.

I switched the code to just run the foreach loop on tasksFiltered. "this.done" is either true or false.

Task template

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

Page Model

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 = koputed(function() {
        return ko.utils.arrayFilter(this.tasks, function(Task) {
        return Task.done == true;
      });
    });

   // CRUD functions excluded 
}; 

this doesn't work.

Just getting into javascript and knockout.js. I've found a bunch of examples of what I'm trying to acplish. And I feel like there is a small syntax error I may be overlooking. I'm trying to filter a set already returned (this.tasks) from a server via ajax/json. I have that working fine. What I would like to do, is have users be able to switch between plete and inplete tasks.

I switched the code to just run the foreach loop on tasksFiltered. "this.done" is either true or false.

Task template

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

Page Model

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.puted(function() {
        return ko.utils.arrayFilter(this.tasks, function(Task) {
        return Task.done == true;
      });
    });

   // CRUD functions excluded 
}; 

this doesn't work.

• javascript
• knockout.js

Share Improve this question Follow edited Mar 23, 2016 at 18:29 Nathan 2,10333 gold badges2121 silver badges3333 bronze badges asked Nov 13, 2013 at 0:09 aibarraaibarra 41911 gold badge77 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

Two minor corrections to your code. First, as @XGreen mentioned, you need to pass the array value, not the observableArray instance, as the first parameter of the arrayFilter function. Lastly, because Task.done is observable, you need to invoke the member to get the value. Here's the modified code:

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

The second solution has a problem with the method ko.utils.stringStartsWith.

ko.utils.stringStartsWith missing in release file.

You can use this code:

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

See Issue Link

It might help you

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

本文标签： javascriptKnockoutJs Array filter syntaxStack Overflow