21

リスト内のすべてのリスト項目にクリック イベントをバインドしています。

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

click:「hasBeenAdded」が true に解決される場合、バインディングを無効にしたいと考えています。私はそれを処理するいくつかの厄介な方法を知っています:

  1. 2 つのリスト項目を用意します。1 つは 用if: hasBeenAdded、もう 1 つは 用if: !hasBeenAddedです。これは DRY とはかけ離れています。
  2. このチェックを JavaScript で処理し、ビューをそのままにしておきます。基本的に無効にする必要があるリスト項目に対して不要なマークアップが生成されるため、これは好ましくありません。

「clickIf」バインディングを登録する方法はありますか?

4

2 に答える 2

46

これを行う

    <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 が追加されている場合は何もせず、そうでない場合はリストに追加します。

于 2013-09-23T23:01:56.790 に答える
1

他の人に役立つ場合に備えて、@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
                   }" />
于 2018-09-25T01:17:22.810 に答える