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 = '\
        \
            \
       \
<title>HR Solutions</title>\
<center>\
<h2>HR Solutions</h2>\
        {{#part-number}}\
            <span><h2>{{header}}</h2></span>\
                <table>\
                    \
                   <th><img src={{{imageURL}}}</img></th>\
               <td><h3>{{name}}</h3>\
                {{{description}}}<br>\
</td>\
            </table>\
        {{/part-number}}<br />\
</center>\
       ';

    var json = {

        "part-number": [{
     "header":"Printers",
            "name": "Buy a printer with your Mac.",
                "description": "Complement your new Mac with a high-performance photo or all-in-one printer that also offers the convenience of AirPrint.",
                "imageURL": "http://store.storeimages.cdn-apple.com/4025/as-images.apple.com/is/image/AppleInc/aos/published/images/c/to/cto/printers/cto-printers-step2?wid=100&hei=100&align=0,-1&fmt=png-alpha&qlt=95&.v=1400646339933",
 
        },
        ],
            "bolder": function () {
            return function (text, render) {
                return "<strong>" + render(text) + '</strong>'
            }
        }
    };
    var html = Mustache.to_html(template, json);
    $('div#AOSUSStore').html(html);
});