CODEWITHSUNDEEP
javascripthandlebars.js
Tabraiz Ali
Tabraiz Ali

Reputation: 677

Handlebar template using each

i want to display only first tr with id="firstTr-1" but it should get the data from the same object and other tr should have datas except the first one.should i add any registryhelper or is thier an inbuilt helper method!! I checked out the documentation but couldnt figure it out.

Template:

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

        <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">Hero Honda<span>Hero Honda</span></td>

        </tr>
        {{#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:

var company= [

        {
        "name": "Hero Honda",
        "lastprice": 310.2,
        "dayschange": 20.1,
        "dayshigh": 220.9,
        "volume": 140.3,
        "52weekhigh": 200.3,
        "name2": "herohonda",
        "dataset": [1200,3000,3200],
        "lastprice2": "1:10pm",
        "dayschange2": "8%",
        "dayshigh2": "1.5%",
        "volume2": "1:10 Pm",
        "52weekhigh2": "1:10 Pm"
        },
        {
        "name": "Hero Honda",
        "lastprice": 310.2,
        "dayschange": 20.1,
        "dayshigh": 220.9,
        "volume": 140.3,
        "52weekhigh": 200.3,
        "name2": "herohonda",
        "dataset": [3200,3500,5000],
        "lastprice2": "1:10pm",
        "dayschange2": "8%",
        "dayshigh2": "1.5%",
        "volume2": "1:10 Pm",
        "52weekhigh2": "1:10 Pm"
        }]

Upvotes: 2

Views: 1084

Answers (1)

mu is too short
mu is too short

Reputation: 434945

I think you're overcomplicating things. Handlebars prefers that you apply your logic to the data before Handlebars sees it. So, rather than messing around with a custom helper that will probably only be used in one place, alter your data and mark the first one with a boolean flag so that you can do a simple {{#if _first}} check in your template.

The template would look like this:

<script id="firsttemp" type="text/x-handlebars-template">
    {{#each objects}}
        <tr{{#if _first}} id="firstTr-1"{{/if}}>
            <!--...-->
        </tr>
    {{/each}}
</script>

and you could set the _first flags like this:

company[0]._first = true;

Demo: http://jsfiddle.net/ambiguous/3Cq9K/

Once you get that out of the way, you have another problem on your hands: you're duplicating the id attributes on your checkboxes but id attributes must be unique:

There must not be multiple elements in a document that have the same id value.

You'll need unique ids on each checkbox if you want to avoid various strange and confusing problems down the road.

Upvotes: 2

Related Questions