输入按键的Knockout事件绑定会导致奇怪的行为

时间:2013-04-20 12:27:44

标签: javascript-events mvvm knockout.js keypress html-input

长话短说,我想让用户在输入元素上输入enter,并调用我的viewmodel中的某个方法。这是我的html输入:

<input id="searchBox" class="input-xxlarge" type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown', event: { keypress: $parent.searchKeyboardCmd}">

这是我在vm中的方法:

searchKeyboardCmd = function (data, event) { if (event.keyCode == 13) searchCmd(); };

一切正常,当我输入输入时调用searchCmd,但问题是我可以在输入中输入任何内容,即我输入输入的所有内容都会被忽略。提前感谢您的帮助。

3 个答案:

答案 0 :(得分:20)

根据KO文档,如果您希望默认操作继续,则必须从事件处理程序返回true

searchKeyboardCmd = function (data, event) {
    if (event.keyCode == 13) searchCmd();
    return true;
};

答案 1 :(得分:2)

here's一个小提琴演示了你试图做什么,并用你的代码替换你的代码中的事件'keypress'并删除只有函数名称的$ parent,除非textfield在一个淘汰的foreach循环中。是以下修改过的代码

<input id="searchBox" class="input-xxlarge" type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown', event: { keyup: searchKeyboardCmd}"

答案 2 :(得分:2)

这是一个工作样本。

http://jsfiddle.net/tlarson/qG6yv/

<!-- ko with: stuff -->
  <input id="searchBox" class="input-xxlarge" type="text" 
    data-bind="value: searchText, valueUpdate: 'afterkeydown', 
    event: { keypress: $parent.searchKeyboardCmd}">   
<!-- /ko -->

和javascript:

var stuffvm = function(){
    var self = this;

    self.searchText = ko.observable();
};

var vm = function() {
    var self = this;

    self.stuff = new stuffvm();

    self.searchCmd = function() {
        console.log("search triggered");
    };

    self.searchKeyboardCmd = function (data, event) { 
        if (event.keyCode == 13) {
            self.searchCmd(); 
        }
        return true;
    }
}

ko.applyBindings(new vm());