Convert Javascript onkeypress to knockoutjs to cal

Question

I am trying to do everthing I can in KnockoutJS however I am having a hard time getting this to convert to knockoutjs.

I have an input box that upon enter press I need to call addInputName(). This is kind of the old school way I think to do it. Is there a way to do this all in knockout?

<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

Why not just wrap the inputs inside a form? Then you can change your HTML to

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

Then your KO viewmodel looks something like

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

Answer 2

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

Look into Custom Bindings. It's an invaluable tool to help get UI logic out of your ViewModel's business logic.