Nested Each With Access To Outer Context

1

I need to nest two #each loops and access a controller property on the inner loop.

In Handlebars:

{{#with controller as self}}
	{{#each someArray}}
		{{#each anotherArrayInsideTheOtherOne}}
                    {{somePropertyOnTheItem}}
			{{self.somePropertyOnTheController}}
	        {{/each}}
	{{/each}}
{{/with}}

The first #each renders correctly, the nested #each does not. If I remove the #with block and use #each-in loops, the same thing happens. If I remove the #with-as block and use #each loops, it works correctly but I don’t have access to the property on the controller.

What gives?

2

Use {{#each item in items}} ... {{/each}} to preserve the outer context.

3
1 Like
4

So, some puzzle pieces I forgot to add: I’m using ember data and the relationships aren’t embedded (which I think is the problem). Updated Fiddle (thanks @jasonmit!!!).

To get the fiddle to work, I had to set async to true for the 1:M relationship. It’s strange that this is only a problem when using a #with block or an #each-in loop as @mmun suggested. I’ll try it on my actual code this afternoon and report back.