# Nested Each With Access To Outer Context

**URL:** https://discuss.emberjs.com/t/nested-each-with-access-to-outer-context/5984
**Category:** Uncategorized
**Created:** [July 29, 2014, 6:13am UTC](https://discuss.emberjs.com/t/nested-each-with-access-to-outer-context/5984 "2014-07-29T06:13:21Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kylecoberly](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kylecoberly/32/15828_2.png) [@kylecoberly](https://discuss.emberjs.com/u/kylecoberly)
#### Post date: [July 29, 2014, 6:13am UTC](https://discuss.emberjs.com/t/nested-each-with-access-to-outer-context/5984/1 "2014-07-29T06:13:21Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![mmun](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mmun/32/14872_2.png) [@mmun](https://discuss.emberjs.com/u/mmun)
#### Post date: [July 29, 2014, 7:43am UTC](https://discuss.emberjs.com/t/nested-each-with-access-to-outer-context/5984/2 "2014-07-29T07:43:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)
#### Post date: [July 29, 2014, 8:05am UTC](https://discuss.emberjs.com/t/nested-each-with-access-to-outer-context/5984/3 "2014-07-29T08:05:13Z")

</div>

> **[Ember Latest - JSFiddle - Code Playground](http://jsfiddle.net/NQKvy/1218/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

### Author: ![kylecoberly](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kylecoberly/32/15828_2.png) [@kylecoberly](https://discuss.emberjs.com/u/kylecoberly)
#### Post date: [July 29, 2014, 2:41pm UTC](https://discuss.emberjs.com/t/nested-each-with-access-to-outer-context/5984/4 "2014-07-29T14:41:31Z")

</div>

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](http://jsfiddle.net/NQKvy/1219/) (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.
