CODEWITHSUNDEEP
javascripthtmlknockout.js
The_Outsider
The_Outsider

Reputation: 1925

Knockout.js If condition in a for each loop

I have a view with Knockout Js which has a loop. I need to add an if condition for one of them. I followed this answer but that does not seem to work.

My code :

<!-- ko foreach: systems -->
<div class="form-group system-status-row border-left border-green">
    <div class="col-sm-2 control-label">
        <label data-bind="text: type"></label>
    </div>
    <div class="col-sm-7">
        <div class="btn-group btn-group-sm status-btns four-btns">
            <button type="button" class="btn btn-success">Operational</button>
            <button type="button" class="btn btn-warning">Partial</button>
            <button type="button" class="btn btn-danger">Non Operational</button>
            <!-- ko if: type !== "Generator" -->
            <button type="button" class="btn btn-inverse">On Generator</button>
            <!-- /ko -->
        </div>
    </div>
</div>
<!-- /ko -->

One of the options in type is Generator but the fourth button is still shown even for that row. Am I missing something?

Upvotes: 2

Views: 1738

Answers (2)

Rajeshkumar Kandhasamy
Rajeshkumar Kandhasamy

Reputation: 6461

Good, You found mistake by yourself.

There is an easy trick to identify these kind of mistakes, specifically while performing bindings in views.

Browser Console Logging:

<!-- ko foreach: systems -->
<div class="form-group">
            <!-- ko if: type !== "Generator" -->

                //Logs the Current scope data in browser console:
                //And property data too: 
                <button data-bind="click: function () { console.log($data); console.log(type); }"> Current Data Log </button>

                //You Button Code
                <button type="button" class="btn btn-inverse">On Generator</button>
            <!-- /ko -->
        </div>
    </div>
</div>
<!-- /ko -->

Just Click on the Current Data Log Button in the Browser, this will log the current data of the scope in the browser console window.

It's really helpful to get to know, whats going with view and data binding.

I hope this will help you!

Upvotes: 2

The_Outsider
The_Outsider

Reputation: 1925

Knockout needs a () after type to get it working.

 <!-- ko if: type() !== "Generator" -->
        <button type="button" class="btn btn-inverse" >On Generator</button>
 <!-- /ko -->

Upvotes: 3

Related Questions