JSFiddle - React, Tailwind, and code Playground

by housecor

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<p>Enter name to add to list: <input type="text" id="first-name" data-bind="valueUpdate: 'afterkeydown', event : { keypress: addOnEnter }" /></p>
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>

<ul data-bind="template: { name: 'nameListTemplate', foreach: list }"></ul>

<script id="nameListTemplate" type="text/html">
    <li>
        <button class="name-delete">Delete</button> <span data-bind="text: name"></span> 
    </li>
</script>

JavaScript

$(function() {
    var names = [ {name: "Bob" }, {name: "Joe"}, {name: "Cory"} ];

    var viewModel = {
        list: ko.observableArray(names),
        
        addItem: function() {
            this.list.push({name: $('#first-name').val() });
            $('#first-name').val('');
        },
        
        removeItem: function() {
            if (!confirm('Sure ya wanna?')) return false;
            this.list.pop();
        },
        
        addOnEnter: function(event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            alert(keyCode);
            if (keyCode === 13) {
                alert('hi');
                viewModel.addItem();
            }
            return true;
        }
    };
    
    ko.applyBindings(viewModel);
});