component observer test
{
"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"
}
}
{{yield}}
<button {{action 'changeName'}}>Change Name</button>
<h1>Welcome to {{appName}}</h1>
<br>
{{my-component}}
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Component.extend({
firstName: 'gokul',
lastName: 'kathir',
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
}),
processFullName: Ember.observer('fullName', function() {
// This will only fire once if you set two properties at the same time, and
// will also happen in the next run loop once all properties are synchronized
//alert(this.get('fullName'))
console.log(this.get('fullName'));
}),
actions: {
changeName() {
var fname = 'gokul';
var lname = 'kathir';
var newFName = `${fname}+${(Math.ceil(Math.random()*10))}`;
var newLName = `${lname}+${(Math.ceil(Math.random()*10))}`;
this.set('firstName', newFName);
this.set('lastName', newLName);
//console.log(this.get('fullName'));
}
}
});