How to access template data in “each” scope?

[Vadorequest]

Hello,

How would you access to the data provided to the template inside a each loop? I've opened a SO question about it a few days ago: http://stackoverflow.com/questions/29844822/handlebars-how-to-access-template-data-in-each-scope

Thank you.

[kpdecker]

Please post a jsfiddle demonstrating your issue so we can help diagnose what the issue might be.

[Vadorequest]

Here (at the end of the file):
https://jsfiddle.net/Vadorequest/0bkv7tL7/

I put the precompiled HBS template using the 2.0.0 version.

here is the original hbs file:

<div class="{{ns}}layout">

    <div id="{{ns}}paymentMethodsTabs">
        {{#each paymentMethods}}
            <button id="{{ns}}{{paymentCardCode}}">{{paymentCardCode}}</button>
        {{/each}}
    </div>

    <br />
    <br />

    <div id="{{ns}}paymentMethods"></div>
</div>

The problem is that the ID of the buttons should include the ns value, which would be pl-layout-tab-cb, pl-layout-tab-visa...

I'm using https://github.com/gruntjs/grunt-contrib-handlebars to compile HBS source to precompiled JS.

[kpdecker]

Try

        {{#each paymentMethods}}
            <button id="{{../ns}}{{paymentCardCode}}">{{paymentCardCode}}</button>
        {{/each}}

[Vadorequest]

I did already, here is the generated source code:

this["Handlebars"] = this["Handlebars"] || {};
this["Handlebars"]["templates"] = this["Handlebars"]["templates"] || {};

this["Handlebars"]["templates"]["assets/views/layouts/tab.hbs"] = Handlebars.template({"1":function(depth0,helpers,partials,data,blockParams,depths) {
    var helper, alias1=this.escapeExpression, alias2=helpers.helperMissing, alias3="function";

  return "            <button id=\""
    + alias1(this.lambda((depths[1] != null ? depths[1].ns : depths[1]), depth0))
    + alias1(((helper = (helper = helpers.paymentCardCode || (depth0 != null ? depth0.paymentCardCode : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(depth0,{"name":"paymentCardCode","hash":{},"data":data}) : helper)))
    + "\">"
    + alias1(((helper = (helper = helpers.paymentCardCode || (depth0 != null ? depth0.paymentCardCode : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(depth0,{"name":"paymentCardCode","hash":{},"data":data}) : helper)))
    + "</button>\r\n";
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data,blockParams,depths) {
    var stack1, helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;

  return "<div class=\""
    + alias3(((helper = (helper = helpers.ns || (depth0 != null ? depth0.ns : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"ns","hash":{},"data":data}) : helper)))
    + "layout\">\r\n\r\n    <div id=\""
    + alias3(((helper = (helper = helpers.ns || (depth0 != null ? depth0.ns : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"ns","hash":{},"data":data}) : helper)))
    + "paymentMethodsTabs\">\r\n"
    + ((stack1 = helpers.each.call(depth0,(depth0 != null ? depth0.paymentMethods : depth0),{"name":"each","hash":{},"fn":this.program(1, data, 0, blockParams, depths),"inverse":this.noop,"data":data})) != null ? stack1 : "")
    + "    </div>\r\n\r\n    <br />\r\n    <br />\r\n\r\n    <div id=\""
    + alias3(((helper = (helper = helpers.ns || (depth0 != null ? depth0.ns : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"ns","hash":{},"data":data}) : helper)))
    + "paymentMethods\"></div>\r\n</div>";
},"useData":true,"useDepths":true});

And it generates an error: https://jsfiddle.net/Vadorequest/x3db3o68/

[kpdecker]

You have a version mismatch between your precompiler and your runtime versions. I'd recommend you update to the 3.x versions of both.

https://jsfiddle.net/x3db3o68/1/ shows this running properly after I updated to the latest runtime.

[Vadorequest]

You're right! I thought I was using the 2.0 version to precompile my templates but ... it seems I was wrong. Thank you ;)

[Vadorequest]

@kpdecker Maybe a warning should be displayed in case of a mismatched version? I don't know if that's possible, but it would definitively save some time to people who run into the same kind of problem.

Anyway, thank you, I've updated the SO question.

[kpdecker]

There are warning checks that are in place but they rely on the runtime to
be at least 3.x.
https://github.com/wycats/handlebars.js/blob/master/spec/runtime.js#L14

On Mon, Apr 27, 2015 at 11:25 AM Vadorequest notifications@github.com
wrote:

@kpdecker https://github.com/kpdecker Maybe a warning should be
displayed in case of a mismatched version? I don't know if that's possible,
but it would definitively save some time to people who run into the same
kind of problem.

Anyway, thank you, I've updated the SO question.

—
Reply to this email directly or view it on GitHub
#1011 (comment)
.