Metamorphs在Ember.js视图中弄乱CSS

Question

我正在使用Ember.js/handlebars来循环一个集合并吐出一些我喜欢引导程序以处理好的和响应性的项目.这是问题:

引导响应css有一些偏差,如:

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

和

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

这些规则似乎针对的是第一批孩子.当我在把手中循环我的收藏时,我最终得到了一堆围绕我的物品的变形代码:

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

这是生产的:

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

所以我的问题是:1.如何告诉css忽略脚本标签？或2.如何编辑css绑定,以便在选择第一个或第一个孩子时跳过脚本标记？或3.我如何构造这个以便Ember使用更少/没有变形标签？

这是一个小提琴:http: //jsfiddle.net/skilesare/SgwsJ/

Answer 1

感谢github上的@wagnet

执行以下操作有助于摆脱变形.谢谢彼得!

模板

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

查看课程

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