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.
Share Improve this question edited Mar 23, 2016 at 18:29 Nathan 2,1033 gold badges21 silver badges33 bronze badges asked Nov 13, 2013 at 0:09 aibarraaibarra 4191 gold badge7 silver badges20 bronze badges3 Answers
Reset to default 10Two 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;
}
});
}