KnockoutJS inventory example

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<h1>Inventory</h1>
<div class="view'">
    <div id="list" class="itemList" data-bind="foreach: itemList">
        <div class="item" data-bind="text: name, click: $parent.selectedItem"></div>
    </div>
    <div class="details" data-bind="with: selectedItem">
        <div>Name: <span data-bind="text: name"></span></div>
        <div>Price: <span data-bind="text: price"></span></div>
        <div>In stock: <span data-bind="text: quantity"></span></div>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 12pt;
}

h1 {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14pt;
}

.view {
    width: 100%;
}

.itemList {
    float: left;
    width: 100px;
    padding: 4px;
}

.details {
    float: left; 
    padding: 4px;
}

.item {
    cursor: pointer;
}

JavaScript

function Item(name, price, quantity) {
    var self = this;
    this.name = ko.observable(name);
    this.price = ko.observable(price);
    this.quantity = ko.observable(quantity);
        
    this.toString = function() { return self.name() + '@' + self.price(); }
    }

var items = [
    new Item("Granola bar", 1.95, 50),
    new Item("Martini bar", 20, 2),
    new Item("Foo bar", 'Priceless', 1)
    new Item("Chico bar", 'Priceless', 1)
];

function viewModel(items) {
    var self = this;
    
    this.itemList = ko.observableArray(items);
    
    this.selectedItem = ko.observable();

};

ko.applyBindings(new viewModel(items));