Metamorphs Messing Up CSS in Ember.js Views

Question

I use Ember.js / handlebars to scroll through the collection and spit out some elements that I would like the boot block to handle a nice and responsive look. Here is the problem:

There are some declarations in the css boot block, for example:

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

and

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

These rules seem to be aimed at first children. When I look through my collection in rudders, I get a bunch of metamorphic codes around my elements:

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

Here is the result:

 <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: 1. How can I tell css to ignore script tags? or 2. How to edit css bindings so that they skip script tags when selecting the first or first child? or 3. How can I structure this so that Ember uses less / no metamorphic tags?

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

Answer 1

Thanks to @wagnet on github

Doing the following helped get rid of 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 addressed this problem using the: first-of-type selector instead of: first-child. The only drawback is that: the type of the first type is less well supported (I believe IE8 supports: first-child, but not: first-of-type).