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

Custom Bindings @ 20:05

查看Custom Bindings。它是帮助您从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 viewmodel看起来像

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

将Javascript onkeypress转换为knockoutjs以调用enter

2 个答案: