Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save Gaurav0/e9c2ef05e27013a389e0b2bfdaec3d40 to your computer and use it in GitHub Desktop.

Select an option

Save Gaurav0/e9c2ef05e27013a389e0b2bfdaec3d40 to your computer and use it in GitHub Desktop.
Computed Component
import Ember from 'ember'
export default Ember.Component.extend({
tagName: 'button',
classNames: ['navigation', 'user-menu'],
myService: Ember.inject.service('my-service'),
contexts: Ember.computed.readOnly('myService.contexts'),
actions: {
openHelp(){
console.log(this.get('contexts'))
alert(this.get('contexts'))
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
myService: Ember.inject.service('my-service'),
didInsertElement() {
// avoid deprecation warning about setting properties in didInsertElement
Ember.run.scheduleOnce('afterRender', () => {
this.get('myService').addContext(this.get('value'));
});
},
willDestroyElement() {
this.get('myService').removeContext(this.get('value'))
},
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Service.extend({
contexts: [],
addContext(context) {
this.get('contexts').pushObject(context);
},
removeContext(context) {
this.get('contexts').removeObject(context);
},
getContext() {
return this.get('contexts');
}
});
<h1>Welcome to {{appName}}</h1>
<br>
{{my-component-help}}
<br>
{{outlet}}
<br>
{{my-component value='Test'}}
{{my-component value='Test2'}}
<br>
<button {{action 'openHelp'}}>Test</button>
<ul>
{{#each contexts as |context|}}
<li>{{context}}</li>
{{/each}}
</ul>
{
"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": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment