Question

当按下回车键时如何使用knockout.js调用函数..这是我的代码。

ko.bindingHandlers.enterkey = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var inputSelector = 'input,textarea,select';
    $(document).on('keypress', inputSelector, function (e) {
        var allBindings = allBindingsAccessor();
        $(element).on('keypress', 'input, textarea, select', function (e) {
            var keyCode = e.which || e.keyCode;
            if (keyCode !== 13) {
                alert('a');
                return true;
            }

            var target = e.target;
            target.blur();

            allBindings.enterkey.call(viewModel, viewModel, target, element);
            alert('b');
            return false;
        });
    });
}
};
ko.applyBindings(viewModel);

HTML

<input type="text" data-bind="value:sendMessageText, enterkey: sendMessage" />

视图模型

function contactsModel(){
    var self = this;
    self.jid=ko.observable();
    self.userName=ko.observable();
    self.sendMsgText=ko.observable();
    self.sendMessage = function(){
        if(self.sendMessageText() == '' )
            alert("Enter something in input field");
        else{
            var message = {
                to : self.userName(),
                message : self.sendMsgText()
            }
            self.sentMessages.push(message);
            sendMessage(message);
        }

     }
 }

任何关于这里出了什么问题的想法或有关更好方法的建议。

Answer 1

不需要自定义绑定，只需使用knockout的按键事件（Knockout docs）：

<input type="text"
       data-bind="textInput : keyword, 
                  event: {keypress: onEnter}" >
</input>

你的功能：

that.onEnter = function(d,e){
    e.keyCode === 13 && that.search();  
    return true;
};

JSFiddle example

编辑：来自knockout（3.2.0）的新绑定：textInput - 无需使用valueUpdate绑定。

Answer 2

当您创建自己的knockout bindingHandler时，它的使用方式与其他bindingHanlders相同，例如：data-bind="text: myvalue"

所以你的HTML需要看起来像这样

<input type="text" data-bind="value:sendMessageText, valueUpdate: 'afterkeydown', enterkey: sendMessage" />

要添加的重要绑定是valueUpdate: 'afterkeydown'绑定。当用户在输入中键入文本并且命中时，如果没有此绑定，则在enterkey绑定之前不会引发onblur事件。如果在enterKey调用的操作中访问输入的值，则会导致observable返回意外值而不返回当前文本。

Another Look at Custom Bindings for KnockoutJS

修改
这是我之前在其他项目中使用过的。 JsFiddle Demo

ko.bindingHandlers.enterkey = { init: function (element, valueAccessor, allBindings, viewModel) { var callback = valueAccessor(); $(element).keypress(function (event) { var keyCode = (event.which ? event.which : event.keyCode); if (keyCode === 13) { callback.call(viewModel); return false; } return true; }); } };

Answer 3

这对我有用，多亏了@DaafVader。

在视图中

<input data-bind="value: searchText, valueUpdate: 'input', event: { keyup: searchKeyUp }" />

在viewmodel中

var searchKeyUp = function (d, e) {
    if (e.keyCode == 13) {
        search();
    }
}

Answer 4

这对我有用，感谢@DaafVader。

在视图中：

<input id="myInput" type="text" 
      data-bind="value : keyword, valueUpdate: 'afterkeydown'">
</input>

在javascript中：

$("#myInput").keyup(function (event) {
        if (event.keyCode == 13) {
            search();
        }
});

将keyup事件放入jquery事件而不是knockout事件会降低knockout viewmodel的复杂性。

Answer 5

在您输入的表单上使用提交绑定（http://knockoutjs.com/documentation/submit-binding.html），以及它的用途。

Knockout docs中的示例：

<form data-bind="submit: doSomething">
    ... form contents like inputs go here ...
    <button type="submit">Submit</button>
</form>

<script type="text/javascript">
    var viewModel = {
        doSomething : function(formElement) {
            // ... now do something
        }
    };
</script>

如果有按钮，它也会自动处理。

按住回车键调用功能

5 个答案: