How to structure so that Ember uses fewer/no metamorph tags?
<p>I'm using Ember.js/Handlebars to loop through a collection.
Have an issue with ember, wrapping it with script metamorphs and ember Div's in the produced output.</p>

<pre><code>                &lt;script type="text/x-handlebars"&gt;
                    {{#each App.PersonController}}
                      {{#view App.view contentBinding="this"}}
                         {{#with content}}
                         {{title}}
                        {{/with}}
                      {{/view}}
                    {{/each}}
                &lt;/script&gt;
</code></pre>

<p><strong>Here is what it looks like:</strong></p>

<pre><code> &lt;div id="ember304" class="ember-view"&gt;
 &lt;script id="metamorph-0-start" type="text/x-placeholder"&gt;&lt;/script&gt;
 &lt;script id="metamorph-2-start" type="text/x-placeholder"&gt;&lt;/script&gt;
 &lt;div id="ember511" class="ember-view" aria-hidden="false"&gt; 
    &lt;script id="metamorph-23-start" type="text/x-placeholder"&gt;&lt;/script&gt; 
    &lt;script id="metamorph-24-start" type="text/x-placeholder"&gt;&lt;/script&gt;
         Mr
    &lt;script id="metamorph-24-end" type="text/x-placeholder"&gt;&lt;/script&gt;
    &lt;script id="metamorph-23-end" type="text/x-placeholder"&gt;&lt;/script&gt; 
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>How can I structure this, so that ember uses fewer no metamorph tags? so that my css doesn't break?</p>
