javascript - 将 Javascript onkeypress 转换为 knockoutjs 以调用 enter

Question

我正在尝试在 KnockoutJS 中尽我所能，但是我很难将其转换为 knockoutjs。

我有一个输入框，在输入时我需要调用 addInputName()。我认为这是一种老式的方式。有没有办法在淘汰赛中做到这一切？

<input id="inputName" onkeypress="addInputName(this, event);" />
<input id="addInputName" type="button" data-bind="event: { click: addInputName }" value="Add" />


self.addInputName = function (inputElement, event) {
    if (event.keyCode == 13) { 
        $('#addInputName').click();
    }
};

Answer 1

// View
<input id="inputName" data-bind="value: name, enterKey: addInputName" />
<input id="addInputName" type="button" data-bind="click: addInputName" value="Add" />

// ViewModel
function ViewModel() {
  var self = this;
  self.name = ko.observable();
  self.names = ko.observableArray();
  self.addInputName = function () {
    self.names.push(self.name());
    self.name("");
  };
}

// Custom Binding
ko.bindingHandlers.enterKey = {
  init: function (element, valueAccessor, allBindings, data, context) {
    var wrapper = function (data, event) {
      if (event.keyCode === 13) {
        valueAccessor().call(this, data, event);
      }
    };
    ko.applyBindingsToNode(element, { event: { keyup: wrapper } }, context);
  }
};

自定义绑定@20:05

查看自定义绑定。这是一个非常宝贵的工具，可以帮助您从 ViewModel 的业务逻辑中获取 UI 逻辑。

Answer 2

为什么不将输入包装在表单中？然后您可以将您的 HTML 更改为

<form data-bind="submit: addInputName">
    <input id="inputName" type="text" data-bind="value: name" />
    <input id="addInputName" type="submit" value="Submit" />
</form>

然后你的 KO 视图模型看起来像

var ViewModel = function()
{
    var self = this;
    self.name = ko.observable();
    self.addInputName = function() {
        // do stuff
    }   
}