Skip to content

Instantly share code, notes, and snippets.

@nightire
Last active November 28, 2015 19:46
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 nightire/65bfb2c9b2154b1b7aef to your computer and use it in GitHub Desktop.
Save nightire/65bfb2c9b2154b1b7aef to your computer and use it in GitHub Desktop.
variable length of data passing down to a component
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
{{outlet}}
import Ember from 'ember';
const { RSVP } = Ember;
export default Ember.Route.extend({
model() {
return RSVP.hash({
testChange: true,
names: ['Ann', 'Ben', 'Joe', 'Rob'],
likes: ['eating', 'playing', 'sleeping']
})
},
actions: {
changeModel(type) {
this.controller.get(`model.${type}`).shiftObject();
this.controller.toggleProperty(`model.testChange`);
}
}
});
<button type="button" {{action "changeModel" "names"}}>
Change Names
</button>
<button type="button" {{action "changeModel" "likes"}}>
Change Likes
</button>
{{#vg-receiver
data-names=model.names
data-likes=model.likes
test=model.testChange as |data|}}
{{#each-in data as |key value|}}
{{#each value as |item|}}
<p>{{item}}</p>
{{/each}}
<hr>
{{/each-in}}
{{/vg-receiver}}
{
"version": "0.4.16",
"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.1.0/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
}
}
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
const { computed } = Ember;
export default Ember.Component.extend({
data: computed('test', {
get() {
return Object.keys(this.attrs)
.filter(prop => prop.includes('data-'))
.reduce((prev, curr) => {
prev[curr.substr(5)] = this.attrs[curr];
return prev;
}, {})
}
})
});
{{yield data}}
{{log this}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment