Knockoutjs EnterAction3

by smichelotti

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<input type="text" data-bind="value: itemToAdd, valueUpdate: 'afterkeydown', executeOnEnter: addItem" />
<button data-bind="click: addItem">Add</button>
<ul>
    <!-- ko foreach: items -->
    <li><span data-bind="text: name"/></li>
    <!-- /ko -->
</ul>

JavaScript

ko.bindingHandlers.executeOnEnter = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13) {
                allBindings.executeOnEnter.call(viewModel);
                return false;
            }
            return true;
        });
    }
};

$(function() {
    var viewModel = {
        // data
        items: ko.observableArray([]),
        itemToAdd: ko.observable(""),

        // behaviors
        addItem: function() {
            this.items.push({ name: this.itemToAdd() });
            this.itemToAdd("");
        }        
    };
    ko.applyBindings(viewModel);
});