Ember.js and handlebars each helper, with subviews

Question

I'm triyng to use the view helper inside my {{#each}} template blocks without using global paths (my controllers create and destroy their own views).

Examples. Given a view with a myList array property, and an itemButton child view:

This will work

<script type="text/x-handlebars" name="my-list-view">
{{#each myList}} <!-- App.myListView.myList -->

    {{view App.myListView.itemButton}} {{title}}

{{/each}}
</script>

This will not:

<script type="text/x-handlebars" name="my-list-view">
{{itemButton}} <!-- works fine outside the each -->
{{#each myList}}

    {{view itemButton}} {{title}} <!-- itemButton view not found -->

{{/each}}
</script>

I do not appear to be able to access the parent view from the each view helper (or in fact access anything other than the properties of the objects being iterated).

The hacky workarounds I've come up with are:

• Add the view I want to use to the items I'm iterating over.

or

1. Creating a collectionView in App.myListView
2. Create an itemViewClass view in that collection view class
3. Move the itemButton view inside the itemViewClass
4. Replace {{#each}} with {{#collection}}

or

• Create a custom handlebars helper for iteration.

Both of these options seem horrible. Surely there's a better alternative than creating 2 new classes (and nesting 4 views deep) just to iterate over a list, though. Is there a replacement handlebars helper I can use instead?

---

Workaround implementations

Option #1 : Modifing the content array

http://jsfiddle.net/FQEZq/3/ Disadvantages: Having to add the view to each model instance just for iteration.

Option #2 : Custom collection view

http://jsfiddle.net/ST24Y/1/ Disadvantages: Now you have two additional views that you do not need / want, and less control of markup. References from the child view to the parent instance now requires parentView.parentView.parentView.

Answer 1

#each is too limited for your requirements. You can make it work if you're willing to use a global path to the view you want to nest within the #each. Otherwise, your collection view approach is best. Adding the view to the model instance is likely to muddy your app design something fierce, so I would avoid that.

One idea to keep your templates clean is to take advantage of Ember.View properties like:

• collectionView - Return the nearest ancestor that is an Ember.CollectionView
• itemView - Return the nearest ancestor that is a direct child of an Ember.CollectionView
• contentView - Return the nearest ancestor that has the property content.