Skip to content

Instantly share code, notes, and snippets.

@zackthehuman
Created June 22, 2016 21:38
Show Gist options
  • Save zackthehuman/376d6890c34f868e6619c936438a7322 to your computer and use it in GitHub Desktop.
Save zackthehuman/376d6890c34f868e6619c936438a7322 to your computer and use it in GitHub Desktop.
accordion thing
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
selectedIndex: 0,
init() {
this._super();
this.selectIndex(this.get('selectedIndex'));
},
selectIndex(index) {
let oldIndex = this.get('selectedIndex');
let oldItem = this.get('items').objectAt(oldIndex);
oldItem.set('isSelected', false);
this.set('selectedIndex', index);
let newItem = this.get('items').objectAt(index);
newItem.set('isSelected', true);
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
items: Ember.A([
Ember.Object.create({
label: "Section 1",
text: "Section 1 text!",
isExpanded: false
}),
Ember.Object.create({
label: "Section 2",
text: "Section 2 text!",
isExpanded: false
}),
Ember.Object.create({
label: "Section 3",
text: "Section 3 text!",
isExpanded: false
})
])
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{parent-component items=items}}
<br>
<br>
{{#if isExpanded}}
<strong>{{item.label}}</strong>
{{else}}
{{item.label}}
{{/if}}
<p>Selected: {{selectedIndex}}</p>
<ul>
{{#each items as |item index|}}
<li onclick={{action selectIndex index}}>{{item.label}}</li>
{{/each}}
</ul>
<ul>
{{#each items as |item index|}}
<li>{{accordion-section item=item isExpanded=item.isSelected}}</li>
{{/each}}
</ul>
{
"version": "0.9.3",
"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.6.0",
"ember-data": "2.6.1",
"ember-template-compiler": "2.6.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment