按住回车键调用功能

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示例

编辑:来自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事件.如果在调用的操作中访问输入的值,则会导致observable返回意外值而不是当前文本enterKey.

再看看KnockoutJS的自定义绑定

编辑
这是我以前在其他项目中使用的. JsFiddle演示

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