1

入力フィールドで Enter キー イベントを検出したいので、キープレス イベントを持つように Knockout バインディングを設定しました。常にではなく、時々のみ正常に動作します。

コード：

<input name="" id="txtSearch" placeholder="" value="" type="search" data-bind="event: { keypress: $root.SendMsg }" />

ビューモデル:

self.SendMsg = function (data, event) {
try {
 if (event.which == 13) {
  var SearchText = $("#txtSearch").val();
                $(".divLoading").show();
                 $.ajax({
                    url: 'http://localhost/api/contacts/search',
                    type: 'GET',
                    dataType: 'jsonp',
                    data: { Text: SearchText },
                    context: this,
                    success: function (result) {

                        self.Contacts(result);                        


                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $(".divLoading").hide();
                        alert(errorThrown);
                    },
                    complete: function () {
                        $('#ListSearch').listview('refresh');                           
                    }
                });
                return false;
            }
            return true;
        }
        catch (e)
        {
            alert(e);
        }
    }
};

データは API から正常に取得されていますが、テキスト入力が機能する場合と機能しない場合があります。ページを更新すると、正常に動作します。どうしてか分かりません。友達を助けてください

4

1 に答える 1

0

バインディングにカスタム バインディング ハンドラーを追加します。

ko.bindingHandlers.returnAction = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        $(element).keydown(function (e) {
            if (e.which === 13) {
                value(viewModel);
            }
        });
    }
};

ビューで、バインディング ハンドラーを使用するように要素を変更し、その値をオブザーバブルに直接結び付けます。検索も追加しました...スパン、現在使用している要素はわかりませんが、オブザーバブルisSearchingが表示されている場合にのみ表示される方法を見てください...ビューモデルからDOM操作を行う必要がなくなります-

<div><span data-bind="visible: isSearching">Searching now...</span></div>
<input id="txtSearch" data-bind="value: searchText, returnAction: sendSearch" />

ビュー モデルは 2 つのオブザーバブルを追加します。1 つは searchText 用、もう 1 つは isSearching 用です。これにより、jQuery で値を取得する必要がなくなります... -

self.searchText = ko.observable();
self.isSearching = ko.observable(false);

self.sendSearch= function (sender) {
    isSearching(true);  // Show your searching now text
    $.ajax({
        url: 'http://localhost/api/contacts/search',
        type: 'GET',
        dataType: 'jsonp',
        data: { Text: searchText() },
        context: this,
        success: function (result) {   
             self.Contacts(result);                        
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        },
        complete: function () {
            $('#ListSearch').listview('refresh');
            isSearching(false);  // Hide searching now...
        }
    });
}

これで、ユーザーが検索入力ボックス内で Enter キーを押すと、searchSend が起動され、AJAX 呼び出しが実行されます。AJAX は成功または失敗を返すため、ここでは try catch は必要ありません。問題が発生した場合はアラートが表示されますが、そうでない場合は継続します。成功した場合は、そこに console.log を投げて、何が返されているかを確認してください...

次は何ですか？

Knockout.js を十分に活用していないことに注意してください。jQuery には、Knockouts とは大きく異なるアプローチがあります。目標は、ビュー モデルから直接 DOM 操作を可能な限り取り除き、ビュー自体が処理できるようにすることです。オブジェクトの非表示と表示、クリック イベントとボタン クリックのバインド、およびその他のあらゆる場所でネイティブに利用可能なバインディングを可能な限り活用します。

jQuery は大きな目的を果たしますが、このアプローチは少し時代遅れです。Knockout などのバインド ライブラリを使用している場合は特に、こうした問題をより雄弁に処理してくれる場合はなおさらです。

于 2013-08-16T14:05:20.360 に答える