3

KnockoutJS でできることは何でもしようとしていますが、これをノックアウト JS に変換するのに苦労しています。

Enter キーを押したときに 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();
    }
};
4

2 に答える 2

3 
// 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

Custom Bindingsを調べてください。ViewModel のビジネス ロジックから UI ロジックを取り出すのに役立つ非常に貴重なツールです。

于 2013-09-06T17:09:47.970 に答える