カスタムバインディングの使用方法は？

StackOverflow https://stackoverflow.com/questions/4557269

  •  14-10-2019
  •  | 
  •  

質問

私は大きなViewModelを持っています、そして、モデル全体を投稿せずに、ステータスの更新（「読み取り」/「Unread」）をサーバーに投稿したいと思います。

私がやったことは、そうするようなカスタムバインディングを作成することです：

ko.bindingHandlers.statusUpdater = {
    update: function(element, valueAccessor) {
        console.log(element);
    }
};

テンプレートで：

<div data-bind='template: { name: "contactsListTemplate", data: viewModel.conversations.conversationlist }'> </div>

<script type="text/html" id="contactsListTemplate">
 <table>
  <tbody>
   {{each(i, conversation) $data}}
    <tr>
     <td>
      <input type="checkbox" data-bind="checked: read, statusUpdater: conversation_id" />
     </td>
    </tr>
   {{/each}}
  </tbody>
 </table>
</script>

カスタムバインディングのために、私は更新にのみ興味がありますが、私ができると思ったのは、knockoutjsの更新を検出し、どのアイテムが更新されたかを判断して、そのアイテムIDと新しい統計を取得してから投稿できるようにすることです。それはサーバーに。

起こっているのは、カスタムバインディングです console.log単一のチェックボックスの変更ですべてのチェックボックスをGingします。これは、チェックボックスを変更することを意味し、3つのチェックボックスがすべてコンソールにログインしています。 ko.bindingHandlers.statusUpdater.

データバインディングにクリックイベントを追加することを考えましたが、それはカスタムバインディングほどきれいに見えませんでした。おそらく、私がカスタムバインディングでやろうとしていることは、彼らの目的ではありませんか？

考え？

役に立ちましたか？

解決

その理由は、モデル値が更新された時に更新方法が呼び出され、INITメソッドが呼び出された後の開始時に呼び出されるためです。

更新バインディング方法は、ViewModelが変更されたときにバインドされたDOM要素の状態を設定するためのものです。

変更に反応してViewModelを更新したい場合は、initメソッドを実装し、このハンドラーにイベント（クリック、変更など）を添付する必要があります。その後、[ビューモデル]にステータス更新を送信できます。

ko.bindingHandlers.statusUpdater = {
    'init': function (element, valueAccessor, allBindingsAccessor) {

        var updateHandler = function() {            
            var valueToWrite;
            if (element.type == "checkbox") {
                valueToWrite = element.checked;
            } else if ((element.type == "radio") && (element.checked)) {
                valueToWrite = element.value;
            } else {
                return; // "checked" binding only responds to checkboxes and selected radio buttons
            }

            var modelValue = valueAccessor();

            if (ko.isWriteableObservable(modelValue)) {             
                if (modelValue() !== valueToWrite) { // Suppress repeated events when there's nothing new to notify (some browsers raise them)
                    $.ajax({
                      url: 'someurl',
                      success: function(data) {
                            alert('status update');
                      }
                    });
                    modelValue(valueToWrite);
                }
            } else {
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['checked']) {
                    allBindings['_ko_property_writers']['checked'](valueToWrite);
                }
            }
        };

        $(element).click(updateHandler).change(updateHandler);
    },
    'update': function (element, valueAccessor) {
        ko.bindingHandlers.checked(element, valueAccessor);
    }
};

私が見つけたこれを学ぶための最良の方法は、Git on GitのKOのデバッグバージョンを見ることでした。達成したいのは、基本的にAJAXコールによる変更されたチェックバインディングです。

私は上記をテストしていませんが、それはあなたを始めるべきです。

乾杯、

イアン

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top