JSFiddle - React, Tailwind, and code Playground

by olli

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<div id="mainPage" data-theme="b" data-role="page">
    <div data-role="content">
        <!-- ko with: productStore-->  
        <ul data-role="listview">
            <!-- ko foreach: materials-->   
            <li>
                 <span data-bind="text: description" class='description'></span> - 
                <span data-bind="text: formattedPrice()" class="ui-li-count"></span>            
            </li>
            <!-- /ko -->                
        </ul>  
        <!-- /ko -->
    </div>
</div>

JavaScript

var dataFromServer = [
    {id: 123,description: "Volume 123",dealerPrice: 123.45},
    {id: 234,description: "Volume 456",dealerPrice: 67.89},
    {id: 345,description: "Kid Set 1",dealerPrice: 12.23},
    {id: 456,description: "Angry Birds",dealerPrice: 45.13}];

var swOFA = swOFA || {};

swOFA.productModel = function(materialId, description, price) {
    var self = this;
    this.materialId = materialId;
    this.description = description;
    this.price = ko.observable(price);
    this.editMaterialId = ko.observable(materialId);
    this.editPrice = ko.observable(price);
    this.formattedPrice = function() {
        var price = eval(this.price());
        return price ? "$" + price.toFixed(2) : "None";
    }
}

swOFA.productStoreModel = function(data) {
    this.materials = $.map(data, function(material) {
        return new swOFA.productModel(material.id, material.description, material.dealerPrice);
    });
}

swOFA.appViewModel = function(data) {
    this.productStore = new swOFA.productStoreModel(data);
}

ko.applyBindings(new swOFA.appViewModel(dataFromServer));

/*This handler turns a "ul" into a prettified listview with jquery.mobile
 --BUT...this is never getting called now that I'm using control flow statements
*/
ko.bindingHandlers.jqmListView = {
    init: function(element) {
        $(element).listview();
    },
    update: function(element, valueAccessor) {
        $(element).listview('refresh');
    }
};