Knockout捕获在文本框中输入以实现与按钮相同

时间:2013-10-07 17:55:53

标签: javascript jquery knockout.js

我第一次使用knockoutjs时遇到了问题。

我有一个搜索字符串的文本框:

<input type="text" data-bind="value: searchString" id="searchText">

和一个按钮:

<span data-bind="click: searchButton" id="searchBtn"></span>

使用以下脚本使用knockout绑定:

function ViewModel() {
        var self = this;

        //-----
        self.searchButton = function () {
            if (self.searchString() != null && self.searchString().length > 3) {
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "./SearchCustomer/",
                    data: "{'searchString':'" + self.searchString() + "'}",
                    error: function (xhr, status, error) {
                        baseShowError("Error");
                    },
                    success: function (response) {
                        var receivedResponse = JSON.parse(response);
                        if (receivedResponse.Success) {
                            ko.mapping.fromJS(receivedResponse.Result, {}, self);
                        } else {
                            baseShowError("customer not found");
                        }
                    }
                });
            }
        };
    });

$(function () {
        var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()))';
        var myViewModel = ko.mapping.fromJSON(jsonModel, {}, new ViewModel());
        ko.applyBindings(myViewModel);
    });

现在我想使用脚本在文本框中捕获一个输入:

$(document).ready(function () {
            $('#searchText').keypress(function (e) {
                if (e.which == 13) {
                    ...........
                }
            });
        });

唯一的问题是输入什么而不是点。我读到了关于不引人注目的事件处理,但它似乎没有尝试过。有人可以给我一个暗示吗?

2 个答案:

答案 0 :(得分:0)

您是不是只需拨打searchButton方法,例如ViewModel.searchButton();

答案 1 :(得分:-1)

虽然捕捉'enter'似乎是一个有效的解决方案,但答案要简单得多。

而不是将单击绑定到按钮,您可以将提交绑定到放置在2个元素上的表单

溶液:   ViewModel保持不变。

<form data-bind="submit: seachButton">
    <input type="text" data-bind="value: searchString">
    <span data-bind="click: searchButton"></span>
</form>

如您所见,数据绑定已添加到新的表单标记中。

(通常如果按钮实际上是输入类型按钮,你可能会删除de click binding以及未经测试)