在淘汰赛 js 中，按键事件有时只能工作？答案

【问题标题】：In knockout js, keypress event is some times only working?在淘汰赛 js 中，按键事件有时只能工作？
【发布时间】：2013-08-16 13:49:14
【问题描述】：

我已将我的 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，但文本输入有时有效，有时无效。如果我们刷新页面，那么它工作正常。我不知道为什么。请朋友们帮帮我

【问题讨论】：

我不能确切地告诉你为什么它对你来说可能变得古怪，但我建议你为 enter press 创建一个自定义绑定处理程序以触发一个事件，并单独调试该事件。要设置绑定处理程序，请检查这个问题 - stackoverflow.com/questions/15258367/…
是否可以重新订购此代码并使其正常工作？
我将尝试为您的问题发布答案，但请注意，我不使用 jQuery mobile，因此我无法确保代码可以为您编译，您可能需要调整它。
好了，我的回答已经完成了，应该可以满足你的需求...
我添加了你的代码。但它停止了其他工作..它显示以下错误“未捕获的语法错误：输入意外结束”..为什么会出现？我可以知道原因吗？如何解决这个问题？

标签： jquery-mobile knockout.js single-page-application

【解决方案1】：

为您的绑定添加自定义绑定处理程序 -

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 之类的绑定库，它会为您处理这些问题，而且更有说服力。

【讨论】：