Conditional 'click' binding with Knockout

Question

I am binding the click event to every list item in a list:

        <ul class="modal-subject-list" data-bind="foreach: filteredSubjects">
            <li data-bind="click: $parent.pickSubject, css: {alreadyAddedBackground: hasBeenAdded}">
                <!-- Lots of code here -->
            </li>
        </ul>

I want to disable the click: binding if 'hasBeenAdded' resolves to true. I know some messy ways to take care of it:

1. Have two list items, one for if: hasBeenAdded, and the other for if: !hasBeenAdded. This is far from DRY
2. Handle this check with javascript and leave the view alone - I don't like this because unnecessary markup is being generated for list items that should be essentially disabled.

Is there a way to register a "clickIf" binding?

Answer 1

Do this

    <ul class="modal-subject-list" data-bind="foreach: filteredSubjects">
        <li data-bind="click: hasBeenAdded ? null : $parent.pickSubject">
            <!-- Lots of code here -->
        </li>
    </ul>

http://jsfiddle.net/7hcj6/

Read -

If the filteredSubject has been added, do nothing, else add to the list or whatever.

Answer 2

Just want to expand on @PW Kad's answer in case it helps others.

I found that I could apply a condition to the knockout event node so that all or none of the handlers are bound. In my case, I needed to bind events only to inputs that were not read only. So this does work if you need to do something similar. Happy coding.

event: $data.SomeProperty() ? null : { multiple event handlers }

Example Code:

<input type="number"
       data-bind="value: $data.Value,
                  css: $data.Css,
                  attr: {
                      title: $data.Title,
                      min: $data.Min,
                      max: $data.Max,
                      readonly: $data.ReadOnly
                  },
                  event: $data.ReadOnly() ? null : {  // <----- HERE
                      focus: $root.onFocus,
                      blur: $root.onBlur,
                      input: $root.onInput,
                      keypress: $root.onKeypress
                   }" />