Question

Ember Handlebars正在弄乱adjacent sibling 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>这样的标签）

我应该使用什么而不是带有把手的相邻兄弟选择器？

Answer 1

使用general sibling（或下一个兄弟）选择器（el ~ el）。

像这样：

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

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

Answer 2

使用Ember.CollectionView和相应的帮助程序代替{{#each}}

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

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

Answer 3

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

app.css

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

items.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()
});

灰烬把手和相邻的CSS选择器

3 个答案: