JSFiddle - React, Tailwind, and code Playground

by stiucsib86

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<div id="ProductModel">
    <fieldset data-bind="foreach: product_data">
                <ul id="sortable" data-bind="foreach: productImages" class="thumbnails ui-sortable">
                    <li class="ui-state-default">
                        <a href="#" class="thumbnail">
                            <h5>Thumbnail label</h5>
                            <img data-bind="attr: {src: url_thumb}" style="width-width: 250px;" />
                            <p>Thumbnail caption right here...</p>
                        </a>
                    </li>
                </ul>
</fieldset></div>

JavaScript

jQuery(document).ready(function() {
});


var initialData = [{
    "productId": "19",
    "productName": "T Product2",
    "productDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
    "createdOn": null,
    "updatedOn": "2011-11-12 01:16:47",
    "isDeleted": null,
    "shopId": "0",
    "categoryId": "156",
    "widgetId": "20",
    "productPrice": "20.00",
    "productQty": "2",
    "productSize": [""],
    "productColor": [""],
    "image1": "Penguins.jpg",
    "image2": "sample-4.jpg",
    "image3": "",
    "image4": "",
    "image5": "",
    "image6": "",
    "productImages": [{
        "url": "http:\/\/sandbox.tackthis.localhost\/media\/products\/19\/Penguins.jpg",
        "url_thumb": "http:\/\/sandbox.tackthis.localhost\/media\/products\/19\/thumbnails\/Penguins.jpg",
        "url_large": "http:\/\/sandbox.tackthis.localhost\/media\/products\/19\/large\/Penguins.jpg"},
    {
        "url": "http:\/\/sandbox.tackthis.localhost\/media\/products\/19\/sample-4.jpg",
        "url_thumb": "http:\/\/sandbox.tackthis.localhost\/media\/products\/19\/thumbnails\/sample-4.jpg",
        "url_large": "http:\/\/sandbox.tackthis.localhost\/media\/products\/19\/large\/sample-4.jpg"}],
    "defaultProduct": "image1",
    "downloadUrl": "http:\/\/tackthis.com\/images\/tackthis_logo.jpg",
    "hasDownload": "0",
    "publish": "0"}];

var category_list = [{
    "categoryId": "157",
    "categoryName": "T Shirt"},
{
    "categoryId": "156",
    "categoryName": "Shirt"},
{
    "categoryId": "454",
    "categoryName": "All"},
{
    "categoryId": "726",
    "categoryName": "Topss"},
{
    "categoryId": "1364",
    "categoryName": "Shoes"}];

var size_list = [{
    "sizeId": "16",
    "sizeName": "Small",
    "widgetId": "20",
    "createdOn": "2011-01-21 18:41:34",
    "updatedOn": "2011-05-11 12:28:02"},
{
    "sizeId": "109",
    "sizeName": "Large",
    "widgetId": "20",
    "createdOn": "2011-05-11 16:48:10",
    "updatedOn":...