Skip to content

Instantly share code, notes, and snippets.

@nem035
Last active November 5, 2016 02:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save nem035/d2ff4a2b862a6fbf4056 to your computer and use it in GitHub Desktop.
Save nem035/d2ff4a2b862a6fbf4056 to your computer and use it in GitHub Desktop.
custom helper
import Ember from 'ember';
export default Ember.Controller.extend({
selectedMenuIndex: 0,
menuItems: [
{ text: 'A' },
{ text: 'B' }
],
actions: {
selectMenuItem: function(itemIndex) {
this.set('selectedMenuIndex', itemIndex);
}
}
});
{{#each menuItems as |item index|}}
<li class="item {{active-class index selectedMenuIndex}}" {{action "selectMenuItem" index}}>{{item.text}}</li>
{{/each}}
import Ember from 'ember';
export function activeClass(params/*, hash*/) {
const index = params[0];
const active = params[1];
return (index === active) ? 'active-class': '';
}
export default Ember.Helper.helper(activeClass);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.active-class {
color: blue;
}
.item {
list-style: none;
cursor: pointer
}
{
"version": "0.4.17",
"EmberENV": {
"FEATURES": {}
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment