a/21902582/1636522

by wared

HTML

<div id="products"></div>

CSS

body {
    font: normal 16px Arial;
}
.product {
    border: 1px solid #999;
    margin-bottom: .5em;
    padding: 1em;
}
.product img {
    margin-right: .5em;
    vertical-align: middle;
}
.product a {
    float: right;
}

JavaScript

var product = {};

// product.data.js

product.data = [{ 
    name: 'Apple iPad mini', 
    base64: base64('apple'),
    link: 'ipadmini.php',
    price: 280
}, {
    name: 'Google Nexus 7',
    base64: base64('google'), 
    link: 'nexus7.php',
    price: 160
}, {
    name: 'Amazon Kindle Fire',
    base64: base64('amazon'), 
    link: 'kindlefire.php',
    price: 230
}];

// product.tpl.js

product.tpl = '\
<div class="product">\
    <img src="data:image/gif;base64,{{base64}}" alt="{{name}}" />\
    <a href="javascript:alert(\'details/{{link}}\')">details</a>\
    {{name}} - ${{price}}\
</div>\
';

// product.view.js

var html = [];
var compiled = compile(product.tpl);
for (var i = 0, l = product.data.length; i < l; i++) {
    html.push(compiled.call(product.data[i]));
}
document.getElementById('products').innerHTML = html.join('');

// helpers.js

function compile(tpl) {
    tpl = Array.prototype.join.call(tpl, '').split(/{{(.*?)}}/);
    return Function('return [' + tpl.map(function (v, i) {
        if (i % 2) return 'this["' + v + '"]';
        return v && '"' + v.replace(/"/g, '\\"') + '"';
    }).join(',') + '].join("");');
}

function base64(who) {
    switch (who) {
        case 'amazon': return 'R0lGODlhGQAZAKIAAAAAAPuiG4qKiv////zu10hISMHBwfvDbCH5BAAHAP8ALAAAAAAZABkAAAOFOLrc/jDKZUS5RZjZBPjgJ3CKF57bRISawXKuuJhAQRoVE9ekLlgg261wCpJon4txsgOMBjuhhChTRDlUQGpAk0ayz8GJMMk6gSEbYf1opoOEwyFAdiA/hpVTsT7UB2xWPxoUG3F0fgtxcn8Oh3QDB44BlAFyl5WQKnOZlIk9DIGgo6QcCQA7';
        case 'google': return 'R0lGODlhGQAZAKIAACty7rTP90OL+f///2ac8d/q+DV+84ax9iH5BAAHAP8ALAAAAAAZABkAAAO4OLrc/jDCI6q1JusMCKMXxgHkZnhKiAnE4boCoAGLKhhH4SrBYRq10GlAIHkKMlPwYigUZoHBIalZXgZPzkFKzVgthcHNANgWlSkRbhAgAQLt31cT1cFL6MFPw1KQN24LeyNRbVSBfj8ALAdRbGRuJII/OT0EBGGGkZMbUUVuTUSRNIkaHnEzHp+IeqlYeGQekKw/mZFNU6OcHAKOcAE6o5IKXZACLwSzugrJJsLPHQyr0M8oEtcMCQA7';
        case 'apple': return...