Carbon steering wheels and adjacent CSS selector
Ember Handlebars tinkering with the adjacent cathedral CSS Selectors ( el + el
)
For example, I have a list of items:
{{#each item in items}}
<span class="item">{{item}}</span>
{{/each}}
And I want to add a space between them using this rule:
.item + .item {
margin-left: 1em;
}
But it won't work because Ember inserts Metamorph placeholders between elements (tags like <script id="metamorph-1-end" type="text/x-placeholder"></script>
)
What should I use instead of the adjacent sibling selector with handles?
source to share
Use the generic sibling (or next sibling) selector ( el ~ el
).
Like this:
.item ~ .item {
margin-left: 1em;
}
It will skip Metamorph tag tags and any other tags between elements.
source to share
Use Ember.CollectionView
and the appropriate helper instead{{#each}}
{{#collection contentBinding=items}}
<span class="item">{{this}}</span>
{{/collection}}
It will wrap everything in a tag (you can customize it with a parameter tagName
), but it will not insert Metamorph tags between elements.
source to share
In my case, I wanted to use the following CSS so that every time the class on an element switches from .mine
to .theirs
and vice versa, the position changes. This is ideal use case for an adjacent CSS selector, but turns out to be a bit tricky 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()
});
source to share