Templating

by Kaleb Hornsby

HTML

<table>
    <tr><td>Name</td><td>Phone</td></tr>
    <tr data-repeater data-name="records">
        <td data-name="name"></td>
        <td data-name="phone"></td>
    </tr>
</table>

JavaScript

var data = {
    records: [{
        name: "Kaleb Hornsby",
        phone: "+1 (831) 917-5861"
    }, {
        name: "Bruce Banner",
        phone: "+1 (234) 567-8900"
    }]
};

$(function() {
    $('[data-repeater]').each(function(i, el){
        var dataRepeater = data[$(el).attr('data-name')],
            dataTemplate = $(el).clone(true);
        $(el).after(dataTemplate).removeAttr('data-repeater').removeAttr('data-name');
        console.log(repeater);
    });
});