Alter Observer that is tied to another observer

I have the following:

var list = Observable('dog', 'cat', 'mouse');

var listView = list.map(function(animal) {
    return {
        text: animal,
        marked: Observable(false)
    }
});


// I want to be able to remove items from list, via listView
function removeMarked() {
    listView.removeWhere(function(animal) {
        return animal.marked.value;
    });
}

When removeMarked is called from UX, the UX changes, yet list is not altered, I want the animals that are also marked to be removed from list not just listView.

How can I easily accomplish this (let’s say the actual list strings are not unique)

Please change forum post title, kind of makes no sense, and I spelled Observable wrong

Hi,

You should only change primordial observables (i.e. list), not derived observables (i.e. listView). When you change the derived observable, the changes do not propagate backwards.

Essentially you need to remove the right item from list manually.

I might be able to do this:

list.removeWhere(function (item, index) {
    return listView.getAt(index).marked.value;
});

But index is not passed to the callback of removeWhere could you guys make every function get passed the index?