Knockout - MVVM with object literal

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
    <div class="page">
        <div class="header" data-bind="with: metadata">
            <h1 data-bind="text: pageTitle"></h1>
            <div data-bind="with:personal">
                <a href="00-index.html">Index</a>
                <a data-bind="attr: {href: link, title: text}, text: text" class="personalCss"></a>
            </div>
        </div>
        <div id="main">
            <div class="showroom">
                <div>
                    <span data-bind="text: products().length"></span>
                    <span>Products</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;}
.page {    
}
.showroom {
}
.header 
{
    margin-bottom: 20px;
}
span {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0 4px 0 4px;
}
/*.text*/
.caption {
    font: 12px 'SansationBold', Arial, sans-serif;
    color: olivedrab;
    
}
.notes {
    font: 12px 'SansationLight', Arial, sans-serif;
    color: gray;
    font-style: italic
}
input, select {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0 4px 0 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;*/
}
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, #ededed 5%, #dfdfdf 100% );
    
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
   ...

JavaScript

// The Model
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": "\/Date(1302181440000)\/",
            "Id": 3,
            "IsDirty": true,
            "ObjectState": 0},
        {
            "ProductId": 4,
            "ReviewerName": "billyjack",
            "Description": "Best guitar ever!",
            "ReviewDate": "\/Date(1302218040000)\/",
            "Id": 4,
            "IsDirty": true,
            "ObjectState": 0}],
        "Model": {
            "Name": "Taylor 314ce",
            "Id": 1,
            "IsDirty": true,
            "ObjectState": 0
        },
        "Category": {
            "Name": "Acoustic Guitars",
            "Id": 1,
            "IsDirty": true,
            "ObjectState": 0
        },
        "Id": 4,
        "IsDirty": true,
        "ObjectState": 0},
    {
        "ModelId": 8,
        "SalePrice": 4199.00,
        "ListPrice": 5199.00,
        "Rating": 5,
        "Photo": "Taylor Koa Series K66ce Grand Symphony 12-String Cutaway Acoustic Electric Guitar.png",
        "CategoryId": 1,
        "ItemNumber": "TK66CE",
        "Description": "Taylor Koa Series K66ce Grand Symphony 12-String Cutaway Acoustic Electric Guitar",
        "Reviews": [],
        "Model": {
 ...