Filtering observableArray

Question

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>

Answer 1

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