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/

The following seems to correct the issue. Ember needs a way to notify me that it is finished rebinding my view.GS.vZipPage.addObserver 'restaurantList', -> setTimeout -> $("#pZipPage").find('.row-fluid').find("div:first").css('margin-left','0px') ,1 — Austin Fatheree

Austin Fatheree Austin Fatheree · Accepted Answer · 2012-03-27T14:35:08

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']

Metamorphs Messing Up CSS in Ember.js Views

2 Answers