Knockout Overview

Simple KO overview demo

by dceast

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
    <div class="page">
        <div id="header">
            <h1>Knockout: Observable Arrays</h1>
        </div>
        <div id="main">
            <div class="showroom">
                <div class="header">
                    <h2>Products</h2>
                    <span data-bind="text: products().length"></span>
                    <br/>
                    <button data-bind="click: load">Load (via ko binding)</button>
                </div>
                <div class="resultsPanel">
                    <ul data-bind="foreach:products">
                        <li class="guitarListCompact">
                            <div class="photoContainer">
                                <img data-bind="visible: photoUrl, attr: { src: photoUrl }" class="photoThumbnail"></img>
                            </div>
                            <div data-bind="text: $parent.formatCurrency(salePrice)">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

CSS

body {padding: 10px; font: 12px 'SansationRegular', Arial, sans-serif;}
span {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
}
/*.text*/
.caption {
    font: 12px 'SansationBold', Arial, sans-serif;
    color: olivedrab
}
input, select {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
    clear: left;
    color: rgb(47, 123, 163);
}
input[type=text] {
    width: 100px;
}
select {
    width: 120px;
}
.negative {
    color: red;
}
.positive {
    color: green;
}
table {
    margin: 8px;
}
thead {
    font: 14px 'SansationBold', Arial, sans-serif;
}
td {
    border-bottom: 1px solid lightgray;
}
.resultsPanel 
{
    margin: 8px;
    padding: 4px;
    height: 300px;
    width: auto;
    border: gray dashed thin;
    overflow:scroll;
    overflow-x: hidden;
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
button {
    -moz-box-shadow: inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
    -o-box-shadow: inset 0 1px 0 0 #ffffff;
    box-shadow: inset 0 1px 0 0 #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top,...

JavaScript

var my = {}; //my namespace
var photoPath = "http://johnpapa.net/files/downloads/sample%20images/guitar/";

function Product() {
    this.id = ko.observable();
    this.salePrice = ko.observable();
    this.listPrice = ko.observable();
    this.rating = ko.observable();
    this.photo = ko.observable();
    this.itemNumber = ko.observable();
    this.description = ko.observable();
    this.photoUrl = ko.computed(function() {
        return photoPath + this.photo();
    }, this);
};
my.showroomViewModel = {
    products: ko.observableArray(),
    formatCurrency: function(value) {
        return "$" + value().toFixed(2);
    },
    load: function() {
        this.products([]); // reset
        var data = my.sampleData.data;
        $.each(data.Products, function(i, p) {
            my.showroomViewModel.products.push(new Product().id(p.Id).salePrice(p.SalePrice).listPrice(p.ListPrice).rating(p.Rating).photo(p.Photo).itemNumber(p.ItemNumber).description(p.Description));
        });
    }
};

ko.applyBindings(my.showroomViewModel);

my.sampleData = (function(my) {
    "use strict";
    var data = {
        Products: [
            {
            "ModelId": 1,
            "SalePrice": 1649.01,
            "ListPrice": 2199.00,
            "Rating": 5,
            "Photo": "Taylor 314-CE Left-Handed Grand Auditorium Acoustic-Electric Guitar.png",
            "CategoryId": 1,
            "ItemNumber": "T314CE",
            "Description": "Taylor 314-CE Left-Handed Grand Auditorium Acoustic-Electric Guitar",
            "Reviews": [{
                "ProductId": 4,
                "ReviewerName": "guitarhero",
                "Description": "This guitar has never let me down. I gig 3-6 nights a week and the 314CE just keeps on ticking. Change the battery and the strings regularly and she sounds like a dream everytime. If you want great sound, playability, dependability and just great playing fun get this guitar. You won\u0027t be sorry.",
                "ReviewDate":...