Question

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

Answer 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);
            }
        });
    }
};

在您的视图中，更改元素以使用绑定处理程序并将其值直接绑定到observable。我现在还添加了一个搜索... span，我不确定你当前使用的是哪个元素，但是看看它只在可观察的isSearching可见时才可见...从你的视图模型中不必进行DOM操作 -

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

你的视图模型添加了两个observable，一个用于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调用。这里没有必要尝试捕获，因为AJAX将返回成功或失败。如果出现问题，您会收到警报，如果没有生命继续。如果成功，可以随意扔一个console.log来查看你要回来的内容......

下一步是什么？

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

jQuery有一个很好的用途，但这种方法有点过时，特别是如果你使用像Knockout这样的绑定库来处理这些问题，并且更加雄辩。

在淘汰赛中，按键事件有时只能起作用吗？

1 个答案: