Skip to content

Instantly share code, notes, and snippets.

@ASH-Michael
Last active January 15, 2020 20:20
Show Gist options
  • Save ASH-Michael/3d7585156fac2212cda19388dcb134f8 to your computer and use it in GitHub Desktop.
Save ASH-Michael/3d7585156fac2212cda19388dcb134f8 to your computer and use it in GitHub Desktop.
set vs defineProperty
import Component from '@ember/component';
import { computed, set } from '@ember/object';
import { inject as service } from '@ember/service';
export default Component.extend({
myService: service(),
computeComponentProperties: computed('componentProp1', 'componentProp2', function() {
const statement = `The computed properties on the component are <b>property1: "${this.componentProp1}"</b> and <b>property2: "${this.componentProp2}"</b>`;
console.log(statement);
return statement;
}),
init() {
this._super(...arguments);
// set properties on the component
this.componentProp1 = this.property1;
this.componentProp2 = this.property2;
// set properties on the service
this.myService.set('serviceProp1', this.property1);
this.myService.set('serviceProp2', this.property2);
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: '`set` vs `defineProperty`'
});
import Service from '@ember/service';
import { computed } from '@ember/object';
export default Service.extend({
computeServiceProperties: computed('serviceProp1', 'serviceProp2', function() {
const statement = `The computed properties on the service are <b>property1: "${this.serviceProp1}"</b> and <b>property2: "${this.serviceProp2}"</b>`;
console.log(statement);
return statement;
})
});
<h1>{{appName}} Demo</h1>
<br>
<br>
{{my-component
property1='hello'
property2='world'
}}
<br>
<br>
<p>{{{this.computeComponentProperties}}}</p>
<p>{{{this.myService.computeServiceProperties}}}</p>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment