3

Ember Handlebars 正在与相邻的同级CSS 选择器 ( el + el)混淆

例如，我有项目列表：

{{#each item in items}}                    
  <span class="item">{{item}}</span>
{{/each}}

我想用这个规则在它们之间添加间距：

.item + .item {
  margin-left: 1em;
}

但它不起作用，因为 Ember 在项目之间插入 Metamorph 占位符（标签如<script id="metamorph-1-end" type="text/x-placeholder"></script>）

我应该使用什么来代替带有车把的相邻兄弟选择器？

4

3 回答 3

2

使用通用兄弟（或下一个兄弟）选择器 ( el ~ el)。

像这样：

.item ~ .item {
  margin-left: 1em;
}

它将“跳过”Metamorph 占位符标签和项目之间的任何其他标签。

于 2013-02-03T12:56:11.413 回答
0

使用Ember.CollectionView和对应的助手代替{{#each}}

{{#collection contentBinding=items}}                    
  <span class="item">{{this}}</span>
{{/collection}}

它会将所有内容包装在标签中（您可以使用tagName参数对其进行自定义），但不会在项目之间插入 Metamorph 标签。

于 2013-03-21T16:16:20.190 回答
0

在我的情况下，我想使用以下 CSS，以便每次项目上的类从.mine到切换，.theirs反之亦然，位置改变。这是 CSS 相邻兄弟选择器的完美用例，但在 ember 中获取该选择器的标记设置有点复杂。

应用程序.css

.mine + .theirs,
.theirs + .mine {
  margin-top: -50px;
}

物品.hbs

{{#collection Ember.CollectionView
              contentBinding='controller.items'
              itemViewClass='App.ItemView'}}

  markup/content you want inside each EventView e.g., {{ this.name }}

{{/collection}}

item_view.js

App.ItemView = Ember.View.extend({
  tagName: 'span',
  classNames: ['item'],
  classNameBindings: ['side'],
  side: function() {
    // Check a property on the item to see whose it is,
    // set the class accordingly.
    return this.get('context.isTheirs') ? 'theirs' : 'mine';
  }.property()
});
于 2013-04-09T21:33:15.280 回答