Search code examples
javascriptjsonhandlebars.js

Handlebar each helper


I want to add _first = true to first object for all objects passed into the compilation. _first = true should be added to both data and company for only first array.

Template

<script id="firsttemp" type="text/x-handlebars-template">

        {{#each objects}}
        <tr>

        <td class="tableFirstCol"><input type="checkbox" class="check" id="childcheck" /></td>
        <td class="tableFirstCol"><input type="checkbox" class="star" id="childstar" /></td>
        <td class="tableFirstCol"><input type="checkbox" class="alarm" id="childalarm" /></td>
        <td class="tableFirstCol">{{name}}<span>{{name}}</span></td>

        </tr>
        {{/each}}
</script>

Json

company =    {
            "name": "IBM",
            "lastprice": 310.2,
            "dayschange": 120.1,
            "dayshigh": 220.9,
            "volume": 140.3,
            "52weekhigh": 200.3,
            "name2": "herohonda",
            "dataset": [1200,2000,5200],
            "lastprice2": "1:10pm",
            "dayschange2": "8%",
            "dayshigh2": "1.5%",
            "volume2": "1:10 Pm",
            "52weekhigh2": "1:10 Pm"
        },
         {
            "name": "zbHero Honda",
            "lastprice": 310.2,
            "dayschange": 220.1,
            "dayshigh": 220.9,
            "volume": 140.3,
            "52weekhigh": 200.3,
            "name2": "herohonda",
            "dataset": [3200,3500,5000],
             "dataset1":[20,+54,1000],
            "lastprice2": "1:10pm",
            "dayschange2": "8%",
            "dayshigh2": "1.5%",
            "volume2": "1:10 Pm",
            "52weekhigh2": "1:10 Pm"
        }

complation:

$("#row-2-td-1-table").html( template({objects:company}) );  
$("#row-2-td-1-table").html( template({objects:data}) );  

Result Should be:

company =    {
            "_first" : true,
            "name": "IBM",
            "lastprice": 310.2,
            "dayschange": 120.1,
            "dayshigh": 220.9,
            "volume": 140.3,
            "52weekhigh": 200.3,
            "name2": "herohonda",
            "dataset": [1200,2000,5200],
            "lastprice2": "1:10pm",
            "dayschange2": "8%",
            "dayshigh2": "1.5%",
            "volume2": "1:10 Pm",
            "52weekhigh2": "1:10 Pm"
        },
         {
            "name": "zbHero Honda",
            "lastprice": 310.2,
            "dayschange": 220.1,
            "dayshigh": 220.9,
            "volume": 140.3,
            "52weekhigh": 200.3,
            "name2": "herohonda",
            "dataset": [3200,3500,5000],
             "dataset1":[20,+54,1000],
            "lastprice2": "1:10pm",
            "dayschange2": "8%",
            "dayshigh2": "1.5%",
            "volume2": "1:10 Pm",
            "52weekhigh2": "1:10 Pm"
        }

Solution

  • Template:

    <tr  {{#equal @index}}{{/equal}}>
    </tr>
    

    Regitry Helper:

    Handlebars.registerHelper('equal', function(lvalue, options) {
    
        if( lvalue==0 ) {
            return "id=firstTr-1";
        } 
    });