CODEWITHSUNDEEP
knockout.js
FatAlbert
FatAlbert

Reputation: 4970

Nested dependencies in knockout

I'd like for a collection to change when a drop down list changes. I have too arrays in the model:

function Model(data) {

        this.Stuff = data.Stuff;
        this.Filter = data.Filter;
        this.SelectedFilterOption = ko.observalbe();
}

The html is like this:

<select data-bind="options: Filter, optionsText: 'Name', value: SelectedFilterOption"></select>
<div data-bind="foreach: Stuff">
<label data-bind="text: Name"></label><br/>
</div>

What I'm trying to achieve is that when the user changes the select the stuff array should be updated and filtered with the value of the select.

How do I do this?

Upvotes: 0

Views: 190

Answers (1)

gbs
gbs

Reputation: 3529

I suggest adding to the model a computed value returning the filtered array, the array will be filtered according to the current value of the selection.

function Model () {
     ....
    this.FilteredStuff = ko.computed(function () {
        return ko.utils.arrayFilter(self.Stuff(), function(item) { return item == self.SelectedFilterOption () } );    
    });  
}

<div data-bind="foreach: FilteredStuff">
    <label data-bind="text: $data"></label><br/>
</div>

A working fiddle

Upvotes: 1

Related Questions