5

顧客のリストから取得し、セレクター [input data-role="customer-search"] に基づいて添付される jQueryUI オートコンプリートがあります。顧客が選択されたら、AJAX 呼び出しを行って顧客の詳細をすべて取得します。この部分はうまく機能しています。問題は、これにノックアウトを組み込む方法を見つけるのに苦労していることです. 私の理想的な状況は、「onSelect: customerSelected」のようなカスタム バインディングです。これは、選択された Customer JSON を取り込み、それをモデル全体に​​統合します。これにより、model.Customer などのビンギングでページ上の一連のフィールドが更新されます。 .住所、モデル.顧客.タイプ.

私が頭を突っ込んでいる場所は、AJAX 呼び出しから Customer JSON を取得した後の接続ポイントです。jQuery オートコンプリートを添付した同じ入力に関連付けられたビューモデルの "customerSelected" メソッドにそれを送信する方法です。

4

2 に答える 2

11

これは、オートコンプリートを処理するために私のチームが作成したバインディング ハンドラーの簡略化されたバージョンです。アイテムが選択されると、そのアイテムはビュー モデルの監視可能な配列に挿入されます。次の方法でバインドされます。

<input type="text" data-bind="autoComplete:myObservableArray, source:'myUrl'" />

「 select:」領域 で項目が選択されたときの動作をカスタマイズできます。

ko.bindingHandlers.autoComplete = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var postUrl = allBindingsAccessor().source; // url to post to is read here
        var selectedObservableArrayInViewModel = valueAccessor();

        $(element).autocomplete({
            minLength: 2,
            autoFocus: true,
            source: function (request, response) {
                 $.ajax({
                    url: postUrl,
                    data: { term: request.term },
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                var selectedItem = ui.item;

                if (!_.any(selectedObservableArrayInViewModel(), function (item) { return item.id == selectedItem.id; })) { //ensure items with the same id cannot be added twice.
                    selectedObservableArrayInViewModel.push(selectedItem);
                }
            }
        });
    }
};

うまくいけば、あなたが探しているのはこのようなものです。何か明確にする必要がある場合は、お知らせください。

注jquery とノックアウトに加えて、この例では underscore.js ( _.any() 関数)を使用しています。

于 2013-03-30T01:13:41.387 に答える