Question

I have a template binding as follows

<tbody id ="mytemplatetbody"
       data-bind="template: {name: 'myTemplate', foreach: Items}">
</tbody>

The rows in template have a status field whose value can be 1 or 2 or 3. There are three checkboxes on this screen and depending on what checkbox(es) user selects, the rows should be visible.

This is what I have done: Added three observable properties to viewModel and tied them to the three checkboxes. I can display those values as follows:

<span data-bind="text: viewModel.checkBox1Selected()"></span>

Question: I am not able to put any if statements in my template for example like this…

{{if viewModel.checkBos1Selected() }} 

…so what is the best way or anyway I can accomplish what I described above?

Answer 1

A common way to do this type of thing is to create a dependentObservable to represent your filtered rows. Then, bind your template against this dependentObservable. Whenever one of your observable filters changes, then the filtered rows will be re-evaluated.

Here is a sample: http://jsfiddle.net/rniemeyer/BXeCb/

You can certainly do the filtering however works best for your app. I used the checked binding against an observableArray to hold my filters, but you could easily go with your method of using three observable properties on your view model.