if else condition with Knockout

Question

I'm very new at Knockout. I have a problem, how can I use if/else with Knockout.

For example like this

<ul class="list-group" data-bind="foreach: users">
    <li class="list-group-item" data-bind="click : setasUser">
        <i class="fa fa-circle text-success"></i> <span data-bind="text: name"></span>
    </li>
</ul>

I want to have a non-clikable item if username == x

How can I do this?

Check out the [if binding](http://knockoutjs.com/documentation/if-binding.html) — JNevill, Jul 24 '17 at 19:31
You should be checking the `enable` binding http://knockoutjs.com/documentation/enable-binding.html — gkb, Aug 08 '17 at 05:25

score 5 · Answer 1 · answered Jul 24 '17 at 20:10

unfortunately knockout does not have if else. however it does have an if binding and a ifnot binding.

here is a fiddle. http://jsfiddle.net/LkqTU/35843/

<ul class="list-group" data-bind="foreach: users">
<!-- ko ifnot: username() === 'x' -->
    <li class="list-group-item" data-bind="click : $parent.setasUser">
        <i class="fa fa-circle text-success"></i> <span data-bind="text: name"></span>
    </li>
  <!-- /ko -->
  <!-- ko if: username() === 'x' -->
  <li class="list-group-item" data-bind="text: name"> </li>
   <!-- /ko -->
</ul>

score 2 · Answer 2 · answered Sep 21 '17 at 13:38

Simply you can set the click event function on based on your condition like below

<ul class="list-group" data-bind="foreach: users">
    <li class="list-group-item" data-bind="click : username !== x ? setasUser: null">
        <i class="fa fa-circle text-success"></i> <span data-bind="text: name"></span>
    </li>
</ul>

if else condition with Knockout

2 Answers2