Knockoutjs.com - Better list example

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

by Keith Lott

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'> 

     
    <p>Your values:</p>
    <select multiple="multiple" height="5" data-bind="options:allItems, selectedOptions:selectedItems"> </select>
         
</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 BetterListModel = function () {
    this.itemToAdd = ko.observable("");
    this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]); 
    this.selectedItems = ko.observableArray(["Ham", "Cheese"]);                 

};
 
ko.applyBindings(new BetterListModel());