Observable Arrays and Event Bindings Example

by stoodder

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div>
    <label>Please enter a first name:</label>
    <input type="text" data-bind="value: new_first_name" />
</div>
<div>
    <label>Please enter a last name:</label>
    <input type="text" data-bind="value: new_last_name" />
</div>
<div>
    <button data-bind="click: addName">Add</button>
</div>
<hr />
<ul data-bind="foreach: names">
    <li>
        <!-- ko text: id --><!-- /ko -->)
        <!-- ko text: full_name --><!-- /ko -->
        <button data-bind="click: $root.removeName">Remove</button>
    </li>
</ul>

JavaScript

//Helper method to trim whitespace
var trim = function(str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
};

var viewModel = {}
viewModel.new_first_name = ko.observable();
viewModel.new_last_name = ko.observable();
viewModel.names = ko.observableArray([]);

name_ids = 1;
viewModel.addName = function() {
    // Make the new name from the given fields
    var first_name = viewModel.new_first_name();
    var last_name = viewModel.new_last_name();
    var full_name = trim( first_name + " " + last_name );
    
    // Reset the new name fields
    viewModel.new_first_name("");
    viewModel.new_last_name("");
    
    // Add the name to the list of names
    viewModel.names.push({
        id: name_ids++, // Just an auto incrementing ID, for example sake
        full_name: full_name
    });
};

viewModel.removeName = function( name_object ) {
    viewModel.names.remove( name_object );
};


ko.applyBindings( viewModel );