Metamorphs Messing Up CSS in Ember.js Views
- by Austin Fatheree
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/
