AOS template,JSON given to Mustache

by navindian

HTML

<script src="https://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<div id="AOSUSStore"></div>

CSS

div {
    font:14px Arial;
    margin:50px 20px;
}

 td {
   background:url(http://store.storeimages.cdn-apple.com/4025/store.apple.com/rs-web/rel/web/shared/configurations/res/customize_product_gradient.png);
background-size: 600px 60px;
    margin-right: 10px;
    width: 600px;
}

JavaScript

$(function () {

    var template = '\
        \
            \
       \
        {{#part-number}}\
<span><h2>{{header}}</h2></span>\
            <table>\
                \
               <th><img src={{{imageURL}}}</img></th>\
               <td><h3>{{name}}</h3>\
                {{{description}}}<br>\
<input type="radio" checked> {{isChosen}}<br>\
<input type="radio" name="colors" id="myRadio" > {{isUpgrade}}<br>\

</td>\
            </table>\
        {{/part-number}}<br />\
       ';

    var json = {

        "part-number": [{
            
  "name": "Processor",
  "description": "Enjoy incredible performance from fourth-generation Intel Core processors. Choose the speed and processor you want.",
  "imageURL": "http://store.storeimages.cdn-apple.com/4025/as-images.apple.com/is/image/AppleInc/aos/published/images/c/to/cto/i5/cto-i5-2013?wid=100&hei=100&align=0,-1&fmt=png-alpha&qlt=95&.v=1400745573270",
             },
        ],
            "bolder": function () {
            return function (text, render) {
                return "<strong>" + render(text) + '</strong>'
            }
        }
    };
    var html = Mustache.to_html(template, json);
    $('div#AOSUSStore').html(html);
});