Skip to content

Instantly share code, notes, and snippets.

@rwjblue
Created August 27, 2015 13:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rwjblue/35ec52938a0cb6205da3 to your computer and use it in GitHub Desktop.
Save rwjblue/35ec52938a0cb6205da3 to your computer and use it in GitHub Desktop.
run helper on update
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle',
stuff: ['grapes', 'animals', 'cheese'],
selectedStuff: ['animals'],
actions: {
toggleThing(thing){
if(this.get('selectedStuff').contains(thing)){
console.log('remove ' + thing);
this.get('selectedStuff').removeObject(thing);
} else {
console.log('add ' + thing);
this.get('selectedStuff').pushObject(thing);
}
}
}
});
import Ember from 'ember';
export function isIn(params) {
return params[0].contains(params[1]);
}
export default Ember.Helper.extend({
compute: function([array, item]) {
this.set('_array', array);
return array.contains(item);
},
recomputeOnArrayChange: Ember.observer('_array.[]', function() {
this.recompute();
})
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
<ul>
{{#each stuff as |thing|}}
<li {{action 'toggleThing' thing preventDefault=false}}>
<input type='checkbox' checked={{is-in selectedStuff thing}} />{{thing}}
</li>
{{/each}}
</ul>
<br>
<br>
Selected Stuff:
<ul>
{{#each selectedStuff as |thing|}}
<li>{{thing}}</li>
{{/each}}
</ul>
{
"version": "0.4.7",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.7/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.6/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment