HB - Basics WP

HP - Basics WP

by prabhat rai

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script type="text/x-handlebars-template" id="test_template">
    Student Passed in the Exams are : 
    <table>
        <tr>
            <th width="60%">Name</th>
            <th width="40%">Roll</th>
        </tr>
        {{#each studentData}}
            {{#if pass}}
                <tr>
                    <td>{{name}} </td>
                    <td>{{roll}}</td>
                </tr>
            {{/if}}
        {{/each}}
    </table>
</script>
<div id="test">
</div>

CSS

table,tr,th,td{
    border : 1px solid black;
}

JavaScript

var data = {
    "studentData" : [{
        name : 'ABC',
        roll : 1,
        pass : true
    },{
        name : 'DEF',
        roll : 2,
        pass : false
    },{
        name : 'GHI',
        roll : 3,
        pass : true
    },{
        name : 'JKL',
        roll : 4,
        pass : true
    },{
        name : 'MNO',
        roll : 5,
        pass : false
    },{
        name : 'PQRS',
        roll : 6,
        pass : true
    }]
}

// Get the HTML of the template
html = $('#test_template').html();
/* Compile */
template = Handlebars.compile(html);
/* Generate HTML using template */
appendText = template(data);
$('#test').html(appendText);