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>\
{{#option}}\
<input type="radio" checked={{isChosen}} id={{label}} name={{label}}> {{label}}<br>\
{{/option}}\
</td>\
            </table>\
        {{/part-number}}<br />\
       ';

    var json = {
        "summary": {
    "freeShipping": "Free Shipping", 
    "promotions": "\n\t\t\t\t\n\t\t\t", 
    "part": "MD711LL/B", 
    "prices": {
      "total": "$899.00"
    }, 
    "instorePickup": "Eligible for In-Store Pickup"
  },
        "part-number": [{
     "option": [
            {
               "upgradeText": "Subtract", 
               "metricsLabel": "1.4GHz Dual-Core Intel Core i5, Turbo Boost up to 2.7GHz", 
               "isChosen": true, 
               "value": "065-C2G2", 
               "label": "1.4GHz Dual-Core Intel Core i5, Turbo Boost up to 2.7GHz", 
               "isUpgrade": false, 
               "price-delta": 150
            }, 
            {
               "upgradeText": "Add", 
               "metricsLabel": "1.7GHz Dual-Core Intel Core i7, Turbo Boost up to 3.3GHz", 
               "isChosen": false, 
               "value": "065-C2G2", 
               "label": "1.7GHz Dual-Core Intel Core i7, Turbo Boost up to 3.3GHz", 
               "isUpgrade": true, 
               "price-delta": 150
            }
         ],     
        },
        ],
            "bolder": function () {
            return function (text, render) {
                return "<strong>" + render(text) + '</strong>'
            }
        }
    };
    var html = Mustache.to_html(template, json);
    $('div#AOSUSStore').html(html);
});