使用Knockout进行条件“点击”绑定

时间:2013-09-23 22:55:54

标签: knockout.js

我将click事件绑定到列表中的每个列表项:

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

如果'hasBeenAdded'解析为true,我想禁用click:绑定。我知道一些混乱的方法来处理它:

  1. 有两个列表项,一个用于if: hasBeenAdded,另一个用于if: !hasBeenAdded。这远远不是DRY
  2. 使用javascript处理此检查并单独保留视图 - 我不喜欢这样,因为正在为应该基本上禁用的列表项生成不必要的标记。
  3. 有没有办法注册“clickIf”绑定?

2 个答案:

答案 0 :(得分:40)

这样做

    <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/

阅读 -

如果已添加filteredSubject,则不执行任何操作,否则添加到列表或其他任何内容。

答案 1 :(得分:0)

只想扩展@PW Kad的答案,以防他人帮助。

我发现我可以对淘汰事件节点应用条件,以便绑定所有处理程序或不绑定任何处理程序。就我而言,我只需要将事件绑定到非只读的输入即可。因此,如果您需要执行类似操作,则此方法确实可行。 编码愉快。

事件:$ data.SomeProperty()? null:{多个事件处理程序}

示例代码:

<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
                   }" />