1

我已经将我的 Knockout 绑定设置为有一个按键事件，因为我希望在输入字段上检测 Enter 键事件。它仅在某些时候工作正常，而不是在所有时候。

代码：

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

您的视图模型添加了两个可观察对象，一个用于 searchText，另一个用于 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...
        }
    });
}

现在，当用户在搜索输入框中按下回车键时，它将触发 searchSend 并执行 AJAX 调用。这里不需要 try catch，因为 AJAX 将返回成功或失败。如果有问题，您会收到警报，如果没有问题，您会收到警报。如果成功，请随意在其中抛出一个 console.log 以查看您返回的内容...

下一步是什么？

请记住，您并没有充分利用 Knockout.js 的价值。jQuery 的方法与 Knockouts 有很大不同。目标是尽可能多地从视图模型中移除直接的 DOM 操作，并让视图自行处理。尽可能利用本机可用的绑定来隐藏和显示对象、绑定单击事件和按钮单击，以及您可以找到的任何其他位置。

jQuery 有一个很好的用途，但这种方法有点过时，特别是如果您使用的是诸如 Knockout 之类的绑定库，它会为您处理这些问题，而且更有说服力。

于 2013-08-16T14:05:20.360 回答