Metamorphs Messing Up CSS in Ember.js Views

Question

I'm using Ember.js / handlebars to loop through a collection and spit out some items that I'd like bootstrap to handle nice and responsive like. Here is the issue:

The bootstrap-responsive css has some declrations in it like:

.row-fluid > [class*="span"]:first-child {
    margin-left: 0;
 }

and

.row-fluid:before, .row-fluid:after {
    display: table;
content: "";
}

These rules seem to target the first children. When I loop through my collection in handlebars I end up with a bunch of metamorph code around my items:

<div class="row-fluid">
            {{#each restaurantList}}
                {{view GS.vHomePageRestList content=this class="span6"}}
            {{/each}}
</div>

Here is what is produced:

<div class="row-fluid">
        <script id="metamorph-9-start" type="text/x-placeholder"></script>
            <script id="metamorph-104-start" type="text/x-placeholder"></script>
              <div id="ember2527" class="ember-view span6">
                My View
              </div>
            <script id="metamorph-104-end" type="text/x-placeholder"></script>
            <script id="metamorph-105-start" type="text/x-placeholder"></script>
              <div id="ember2574" class="ember-view span6">
                My View 2
              </div>
            <script id="metamorph-105-end" type="text/x-placeholder"></script>
        <script id="metamorph-9-end" type="text/x-placeholder"></script>
</div>

So my question is this: 1. How can I tell css to ignore script tags? or 2. How can I edit the css bindings so that they skip over script tags when selecting the first or first child? or 3. How can I structure this so that Ember uses fewer/no metamorph tags?

Here is a fiddle: http://jsfiddle.net/skilesare/SgwsJ/

Answer 1

Thanks to @wagnet on github

Doing the following helped get rid of the metamorphs. Thanks Peter!

Template

{{view Em.CollectionView itemViewClass="GS.vHomePageRestList" contentBinding="restaurantList" class="row-fluid"}}

View Class

GS.vHomePageRestList = Em.View.extend
templateName: 'tHomePageRestList'
classNames: ['span6']

Answer 2

I've dealt with this issue by using the :first-of-type selector instead of :first-child. The one drawback is that :first-of-type is less well supported (I believe IE8 supports :first-child but not :first-of-type).