Skip to content

Instantly share code, notes, and snippets.

@malchak
Last active August 31, 2015 17:16
Show Gist options
  • Save malchak/694ecc0066e617f44aba to your computer and use it in GitHub Desktop.
Save malchak/694ecc0066e617f44aba to your computer and use it in GitHub Desktop.
Toggle-List
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
let items = [
{ title: "First", details: "This is the first item!"},
{title: "Second", details: "This is the second item!"}
]
return items;
}
});
{{#my-list items=model as |item|}}
{{my-list-item item=item}}
{{/my-list}}
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
itemIsExpanded: true,
listIsExpandedDidChange: Ember.observer('listIsExpanded', function () {
this.set('itemIsExpanded', this.get('listIsExpanded'));
}),
actions: {
toggleItemIsExpanded() {
this.toggleProperty('itemIsExpanded');
}
}
});
<li>
<h5>{{item.title}} Item</h5> <button {{action 'toggleItemIsExpanded'}}>
Toggle {{item.title}} Item
</button>
<p>List is expanded = {{listIsExpanded}}</p>
<p>Item is expanded = {{itemIsExpanded}}</p>
{{#if itemIsExpanded}}
<p style="color:red">{{item.details}}</p>
{{/if}}
</li>
import Ember from 'ember';
export default Ember.Component.extend({
listIsExpanded: true,
actions: {
toggleListIsExpanded() {
this.toggleProperty('listIsExpanded');
}
}
});
<h3>This is my List!</h3>
<button {{action 'toggleListIsExpanded'}}>Toggle List</button>
<ul>
{{#each items as |item|}}
{{my-list-item item=item listIsExpanded=listIsExpanded}}
{{/each}}
</ul>
{
"version": "0.4.9",
"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.9/ember.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment