knockout - how to use template data in a computed function - templates

Question

The objective is to show a filtered list of items for each possible state. I'm trying a template because such a list may need to display in many places. The template calls filterItems to get its particular list of items.
The filterItems code below uses a field in the viewModel (current_filter), so all the lists have the same items (3 and 8 which are in a ready state) :( That's not the idea. Each template instance has $data which contains the correct filter value. Is there a way to make this filter value available to the filterItems function?
<script>
var viewModel = {
items: ko.observableArray(
[
{ "iid": 1, "state": "entered" },
{ "iid": 3, "state": "ready" },
{ "iid": 4, "state": "delivered" },
{ "iid": 8, "state": "ready" },
{ "iid": 13, "state": "entered" }
]),
states: ko.observableArray(
[
{ "sid": 1, "filter": "entered", "color": "yellow" },
{ "sid": 2, "filter": "ready", "color": "red" },
{ "sid": 3, "filter": "delivered", "color": "blue" }
]),
current_filter: 'ready'
}
viewModel.filterItems = ko.computed(function () {
var filtered_items = [];
for (var i = 0; i < viewModel.items().length; ++i)
if(viewModel.items()[i].state == viewModel.current_filter)
filtered_items.push(viewModel.items()[i]);
return filtered_items;
}, viewModel);
</script>
<div data-bind="foreach: states">
<div data-bind="template: {name: 'state', data: $data}"></div>
<script type="text/html" id="state">
<h2 data-bind="text: filter"></h2>
<ul data-bind="foreach:viewModel.filterItems()">
<li>
<div data-bind="text: iid"></div>
</li>
</ul>
</script>
</div>
<script>ko.applyBindings(viewModel);</script>
jsFiddle at https://jsfiddle.net/mthrock/kxpfdfva/8/#&togetherjs=JKJOos6VJc

Answer 1

how about a component instead of a template?
run snippet below
ko.components.register('mycomponent', {
viewModel: function(params) {
var self = this;
this.items = ko.observableArray(
[{
"iid": 1,
"state": "entered"
}, {
"iid": 3,
"state": "ready"
}, {
"iid": 4,
"state": "delivered"
}, {
"iid": 8,
"state": "ready"
}, {
"iid": 13,
"state": "entered"
}]);
this.filter = params.filter;
this.filterItems = ko.computed(function() {
var filtered_items = [];
for (var i = 0; i < this.items().length; ++i)
if (this.items()[i].state == this.filter)
filtered_items.push(this.items()[i]);
return filtered_items;
}, this);
},
template: ' <h2 data-bind="text: filter"></h2>\
<ul data-bind="foreach:filterItems()">\
<li>\
<div data-bind="text: iid"></div>\
</li>\
</ul>'
});
function model() {
var self = this;
this.states = ko.observableArray(
[{
"sid": 1,
"filter": "entered",
"color": "yellow"
}, {
"sid": 2,
"filter": "ready",
"color": "red"
}, {
"sid": 3,
"filter": "delivered",
"color": "blue"
}]);
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-bind="foreach: states">
<mycomponent params="filter: filter"></mycomponent>
</div>