I have troubles with filtering observable array with knockout.js
my js:
Array containing data
var docListData = [
{ name: "Article Name 1", info: "Authors, name of edition, publishing year,(moreinfo?)", checked:ko.observable(false) },
{ name: "Article Name 2", info: "Authors, name of edition, publishing year,(moreinfo?)", checked:ko.observable(false) },
{ name: "Article Name 3", info: "Authors, name of edition, publishing year,(moreinfo?)", checked:ko.observable(false) }
];
viewmodel:
var viewModel = function() {
var self = this;
Filling observable array with data
self.docList = ko.observableArray(
ko.utils.arrayMap(docListData, function (item) {
return item;
})
);
self.appendableData = ko.observableArray([]);
Creating additional parameters in observable array
for (var i=0; i < self.docList().length; i++){
self.docList()[i].type = "document";
self.docList()[i].id = i;
self.docList()[i].pos = ko.observable(-1);
// self.docList()[i].pos = -1;
self.appendableData().push(self.docList()[i]);
};
Function that changes additional values in my observable array and logs changes to console
toggleChecked = function (){
this.checked(!this.checked());
if (this.checked() === true){
this.pos = self.position; // changes value, but doesn't affect target array
self.appendableData()[this.id].pos = self.position; //second try, same result
self.position++;
console.log("this.pos",this.pos);
console.log("this id: ", this.id);
} else if(this.checked() === false) {
this.pos = self.position;
self.position--;
console.log("this.pos",this.pos);
console.log('nope');
};
console.log("position for next: ",self.position);
console.log(self.appendableData());
console.log(self.appendableDataToView());
};
manual changes affect target array
self.appendableData()[2].pos =2; // this affects target array
filtering function returns an empty array:
self.appendableDataToView = ko.computed(function () {
return ko.utils.arrayFilter(self.appendableData(), function (item) {
return item.pos >= 0;
});
});
my html code:
<div class="list-wrapper">
<ul class="unstyled" data-bind="if: docList().length > 0">
<li data-bind="foreach: docList">
<label class="checkbox" data-bind="click: toggleChecked">
<p data-bind="text: name"></p>
<span data-bind="text: info"></span>
</label>
</li>
</ul>
</div>
First of all I think that you use pos
property in wrong way. It's observable so you should assign it in the following way:
self.appendableData()[2].pos(2);
and in your filter function correct retrieving the value:
return item.pos() >= 0;
Additionally I suggest you to use knockout-projections library (https://github.com/SteveSanderson/knockout-projections) - it's more efficient:
self.appendableDataToView = self.appendableData.fitler(function (item) {
return item.pos >= 0;
});