Question

I have a viewModel with an observableArray that gets updated from the server, then I need to be able to define a dynamic number of divs to filters of that observableArray.

It’s a scrum board example, So imagine you receive an array of stories back from the server. and you add the to viewModel.stories() observableArray.

I’d like to have template bound filters for various different values of a property of each story within the observable array.

So given

item.BoardState is “Backlog” or “In Progress”

I want a dependent observable that I can paramatize to only show stories that are “In Progress”

    self.filterInProgress = ko.dependentObservable(function (filterParameter) {
    return ko.utils.arrayFilter(self.stories(), function (item) {
        console.log("Current Filter = " + filterParameter + "--- Current BoardState = " + item.BoardState);
        return ((item.BoardState === filterParameter));
    });
});

Unfortunately it says it doesn’t work. any suggestions greatly appreciated.

Answer 1

You can always move the filter out to a separate function and create a dependentObservable for each filterType:

function filterStories(stories, filterParameter) {
    return ko.utils.arrayFilter(stories, function (item) {
        console.log("Current Filter = " + filterParameter + "--- Current BoardState = " + item.BoardState);
        return ((item.BoardState === filterParameter));
    });
}

self.filterInProgress = ko.dependentObservale(function() {
    return filterStories(self.stories(), "InProgress");
});

self.filterBacklog = ko.dependentObservale(function() {
    return filterStories(self.stories(), "Backlog");
});