3

Ember Handlebars is messing with adjacent sibling CSS selectors (el + el)

For example, I have list of items:

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

And I want to add spacing between them with this rule:

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

But it doesn't work, because Ember is inserting Metamorph placeholders between items (tags like <script id="metamorph-1-end" type="text/x-placeholder"></script>)

What should I use instead of adjacent sibling selector with handlebars?

3 Answers 3

2

Use general sibling (or next sibling) selector (el ~ el).

Like this:

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

It will 'skip' Metamorph placeholder tags and any other tags between items.

2
0

Use Ember.CollectionView and corresponding helper instead of {{#each}}

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

It will wrap everything in a tag (you can customize it with tagName parameter), but it won't insert Metamorph tags between items.

0

In my case I wanted to use the following CSS so that every time the class on the item switched from .mine to .theirs and vice versa, the position changed. This is the perfect use case for the CSS adjacent sibling selector, but turns out to be slightly complicated to get the markup setup for that selector in 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()
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.