3

这是我的代码。

    <input type="text" placeholder="Add New Tag" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown', event: { keypress: addOnEnter }" />

这是我的淘汰赛代码。

    self.addOnEnter = function (event) {

        console.log(event.which);

        var keyCode = (event.which ? event.which : event.keyCode);
        if (keyCode === 13) {
            self.addTag();
        }
        return true;
    };

当我在输入字段中输入某些内容时，我会记录事件，并不断返回未定义。我不知道为什么我无法捕捉到哪个事件被触发。

你可以在 jsFiddle 上测试我的代码。 http://jsfiddle.net/GBLNR/6/

只需在输入字段中输入任何内容，然后从控制台查看结果。

4

2 回答 2

4

Knockout 将当前数据上下文作为第一个参数传递给处理程序。event是第二个论点。

因此，您的函数的签名需要是：

self.addOnEnter = function(data, event) {

}

或者，处理此问题的一种好方法是通过自定义绑定，例如：

//a custom binding to handle the enter key (could go in a separate library)
ko.bindingHandlers.enterKey = {
    init:function (element, valueAccessor, allBindingsAccessor, data, context) {
        var wrappedHandler, newValueAccessor;

        //wrap the handler with a check for the enter key
        wrappedHandler = function (data, event) {
            if (event.keyCode === 13) {
                valueAccessor().call(this, data, event);
            }
        };

        //create a valueAccessor with the options that we would want to pass to the event binding
        newValueAccessor = function () {
            return { keyup:wrappedHandler };
        };

        //call the real event binding's init function
        ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data, context);
    }
};

现在你只需enterKey对你的函数使用这个绑定，addOnEnter它只需要处理你的数据。

于 2012-10-31T03:13:11.127 回答
0

修改了 Niemeyer 对以下代码的回答，以防止输入键事件冒泡。textarea当您想避免元素中的换行时很有用。

ko.bindingHandlers.enterPressed = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    // Wrap the handler with a check for the enter key.
    var wrappedHandler = function (data, event) {
      if (event.keyCode === 13) {
        valueAccessor().call(this, data, event);
        return false;
      } else {
        return true; // Allow event to bubble.
      }
    };

    // Create a valueAccessor with the options that we would want to pass to the event binding.
    var newValueAccessor = function () {
      return { keypress: wrappedHandler }; // Using keypress instead of keyup.
    };

    // Call the real event binding's init function.
    ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel);
  }
};
于 2013-10-18T09:30:44.043 回答