Skip to content

Instantly share code, notes, and snippets.

@tomlagier
Created April 15, 2016 15:40
Show Gist options
  • Save tomlagier/c0eb2c193d3ff86e4b00432811ad9727 to your computer and use it in GitHub Desktop.
Save tomlagier/c0eb2c193d3ff86e4b00432811ad9727 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
heightToggled: false,
click() {
this.toggleProperty('heightToggled');
},
actions: {
toggleChecked(item) {
this.sendAction('toggleChecked', item);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
toggleChecked(item) {
this.sendAction('toggleChecked', item);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
toggleChecked(item) {
this.sendAction('toggleChecked', item);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
items: Ember.A(['red', 'blue', 'green']),
init() {
this.decoratedItems = this.get('items').map(item => {
return new Ember.Object({
item,
checked: false
});
});
this.get('items').addEnumerableObserver(this, {
willChange: (items, removing) => {
removing.forEach(removeItem => {
let decoratedItem = this.get('decoratedItems').findBy('item', removeItem);
this.get('decoratedItems').removeObject(decoratedItem);
});
},
didChange: (items, removeCount, adding) => {
adding.forEach(newItem => {
this.get('decoratedItems').addObject(new Ember.Object({ item: newItem, checked: false}))
})
}
})
},
actions: {
addItem() {
this.get('items').pushObject('yellow');
},
removeItem() {
this.get('items').removeObject('yellow');
},
toggleChecked(item) {
this.get('decoratedItems').findBy('item', item).toggleProperty('checked');
},
changeItem() {
this.set('items.firstObject', 'orange')
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
<button {{action 'addItem'}}>Add item</button>
<button {{action 'removeItem'}}>Remove item</button>
<button {{action 'changeItem'}}>Change item</button>
{{items.firstObject}}
{{parent-component-a items=decoratedItems toggleChecked="toggleChecked"}}
<hr/>
{{parent-component-b items=decoratedItems toggleChecked="toggleChecked"}}
<br>
<br>
<li style="height: {{if heightToggled '100px' '50px'}}">
<input type="checkbox"
checked={{item.checked}}
onclick={{action "toggleChecked" item.item}} />
{{item.item}}
</li>
{{#each items as |item|}}
{{child-component item=item toggleChecked="toggleChecked"}}
{{/each}}
{{#each items as |item|}}
{{child-component item=item toggleChecked="toggleChecked"}}
{{/each}}
{
"version": "0.7.2",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.4.4",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
"ember-template-compiler": "2.4.4"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment