Knockoutjs.com - Simple list example

http://knockoutjs.com/examples/simpleList.html

by ernestohs

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
<div class='liveExample'> 
    
    <form data-bind='submit: addItem'> 
        New item:
        <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> 
        <button data-bind='enable: itemToAdd().length > 0' type='submit'>Add</button> 
        <p>Your items:</p> 
        <select data-bind='options: items' multiple='multiple' width='50'> </select> 
    </form> 
    
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

JavaScript

var viewModel = {};
viewModel.items = ko.observableArray(["Alpha", "Beta", "Gamma"]);
viewModel.itemToAdd = ko.observable("");
viewModel.addItem = function() {
    if (viewModel.itemToAdd() != "") {
        viewModel.items.push(viewModel.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
        viewModel.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
    }
}

ko.applyBindings(viewModel);