Ember.js Handlebars scoping issue

Question

I'm having a scoping issue with Handlebars templates. I have a list of modules, each of which contains a list of services. So I have a template like this (with some markup removed):

{{#each controller}}
    <a onclick='$(".{{unbound uuid}}").toggle(0);'>

    {{#each service in services}}
        <div class='{{unbound uuid}}'></div>
    {{/each}}
{{/each}}

The problem is that the second {{unbound uuid}} doesn't get substituted. And if I try accessing any other item of the outer scope, the same thing happens. However, the Ember.js site says that using the each ... in helper should preserve outer scope. What am I doing wrong?

(FYI: Using latest version of Ember.js, Ember-data and Handlebars.)

This blog post (emberist.com/2012/04/06/bind-and-bindattr.html) explains why you need to use {{bindAttr}} instead of normal handlebars {{...}}. — CraigTeegarden
That's not really my issue. Using the unbound keyword takes care of that nicely (since I don't really need a binding there). My issue is with scope. And as you can see in my comment to Gevious' answer, it still doesn't make the correct substitution for uuid. — GJK
try to log your uuid in the inner scope, like {{#each service in services}}{{log uuid}}{{/each}} do you see the logged uuid in the console? — intuitivepixel
I have found a workaround. By wrapping the inner each with {{#with uuid as outerUUID}} ... {{/with}}, I can solve my problem. However, this doesn't explain why the scoping doesn't work as it should. — GJK

intuitivepixel intuitivepixel · Accepted Answer · 2013-07-16T13:17:31

Maybe this is the right syntax?

{{#each item in controller}}
  <a onclick='$(".{{unbound item.uuid}}").toggle(0);'>

  {{#each service in services}}
    <div class='{{unbound item.uuid}}'></div>
  {{/each}}
{{/each}}

Ember.js Handlebars scoping issue

1 Answers