Question

Using knockout.js I’ve run into this problem a couple of times now. It seems that I am doing a lot of repetition for simple if statements that only change a single attribute in a line.

<!-- ko foreach: $data.content -->
    <!-- ko if: $index() === 0 -->
        <div class='tab-pane active'>
    <!-- /ko -->
    <!-- ko if: $index() !== 0 -->
        <div class='tab-pane'>
    <!-- /ko -->
<!-- /ko -->

This example is a simple demonstration, but the problem occurs in much more complex lines, which obviously makes it very susceptible for bugs.

Does knockout provide any kind of inline if statements, of is there any other way around this code repetition?

Answer 1

You can use css binding for adding css classes:

<!-- ko foreach: $data.content -->
   <div class='tab-pane' data-bind="css: {active: $index() === 0 } "></div>
<!-- /ko -->