Unbound ember each helper without script tags

Question

I'm having a strange issue with Ember and I really need a way around it

I have the following:

{{#unbound each items}}
    <span>{{unbound myValue}}</span>
    {{unbound view App.MyView content=this.subItems}}
{{/unbound}}

which should output the following:

<div>
    <span>First item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>
    ...
<div>
    <span>nth item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>

There are two things to notice there:

I'm not using the collection handler...it adds an extra div in for the view it creates and I cannot use that with the plugin I am using...I -have- to retain the DOM structure required above
There should be no metamorph tags...Nothing inside of this structure needs to be bound and the metamorph tags mess with my plugin's ability to function

Now, here's the issue: I used the '#unbound each' helper above, which should in theory have outputted the DOM structure above. Instead I still get metamorph tags from the each block:

<script id="metamorph-0-start"></script>
<script id="metamorph-1-start"></script>
<div>
    <span>First item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>
<script id="metamorph-1-end"></script>
<script id="metamorph-0-end"></script>
    ...
<script id="metamorph-n0-start"></script>
<script id="metamorph-n1-start"></script>
<div>
    <span>nth item</span>
    <div>
        ...first other view...
    </div>
    <div>
        ...nth other view...
    </div>
</div>
<script id="metamorph-n1-end"></script>
<script id="metamorph-n0-end"></script>

What am I doing wrong here?

This is a live JS Fiddle demonstrating the issue: http://jsfiddle.net/NQKvy/942/

It would appear that unbound doesn't work with block helpers. — Kingpin2k
so the only solution is to use a straight handlebars template in rendering the view? Any idea on whether or not the block unbound helper eventually does plan on providing this functionality? — Robert Petz
It probably won't, the Ember Core team is working on HTMLBars, github.com/tildeio/htmlbars/commits/master, which would probably get you closer to your solution. (It essentially works by manipulating DOM instead of using metamorph tags to keep track of the items) — Kingpin2k

Sarus Sarus · Accepted Answer · 2014-05-01T08:08:48

The {{unbound}} helper doesn't work as a block helper and can't be used with {{each}}

You always need to use it on a specific property like this:

{{unbound myProperty}}

See this thread on github that discusses this issue: https://github.com/emberjs/ember.js/pull/1457

The good news is that until HTMLBars comes out (last I saw was they are shooting for Ember 1.8) you can use the {{group}} helper. It's not part of ember core but I have used it succesfully with Ember 1.5 and it will get rid of the metamorphs for you (as well as data binding).

Download it here:

https://github.com/emberjs/group-helper

The easiest thing to do is just copy the contents of https://github.com/emberjs/group-helper/blob/master/packages/group-helper/lib/main.js into your own helper.

Then you can do:

{{#group}}
   {{#each items}}
       <span>{{unbound myValue}}</span>
       {{view App.MyView content=this.subItems}} 
   {{/each}}
{{/group}}

Note: As stated by Robert in the comments below the {{#group}} helper will also affect the view itself.

Hope that helps!

Unbound ember each helper without script tags

1 Answers