Question

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

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

Answer 2

我通过使用：first-of-type选择器而不是：first-child来处理这个问题。一个缺点是：第一类支持不太好（我相信IE8支持：第一个孩子但不支持：第一个类型）。

Metamorphs在Ember.js视图中弄乱CSS

2 个答案: