Component rerender
{
"version": "0.10.6",
"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.9.0",
"ember-data": "2.9.0",
"ember-template-compiler": "2.9.0",
"ember-testing": "2.9.0"
},
"addons": {}
}
<button {{action 'updateUserOne'}}>Update 1</button>
<button {{action 'updateUserOneDummy'}}>Update 1 Dummy</button>
<button {{action 'updateUserTwo'}}>Update 2 </button>
<button {{action 'updateUserTwoDummy'}}>Update 2 Dummy</button>
{{outlet}}
<hr>
{{my-com user=user}}
{{user.name}}
{{user.age}}
<h1>Welcome to {{appName}}</h1>
<br>
{{#link-to 'application'}}Index{{/link-to}}
<button {{action 'goToTwo'}}>Two</button>
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';
export default Ember.Route.extend({
queryParams: {
id: {
as: 'doc_id'
}
},
model(params) {
console.log(params);
}
});
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
console.log(params);
},
actions: {
updateNewUser(user) { // console.log(this.get('controller.userId'));
//console.log(user.id);
if(this.get('controller.userId') !== user.id) {
this.set('controller.user', user);
this.set('controller.userId', user.id);
}
}
}
});
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('one', function() {
this.route('two');
})
});
export default Router;
import Ember from 'ember';
export default Ember.Controller.extend({
userOne: {id:'123', name: 'gokul', age: '21'},
userOneDummy: {id:'123', name: 'gokul', age: '21'},
userTwo: {id:'124', name: 'arun', age: '20'},
userTwoDummy: {id:'124', name: 'arun', age: '20'},
path: 'one/two',
queryParams: [
'id'
],
actions: {
updateUserOne() {
this.send('updateNewUser', this.get('userOne'));
},
updateUserOneDummy() {
this.send('updateNewUser', this.get('userOneDummy'));
},
updateUserTwo() {
this.send('updateNewUser', this.get('userTwo'));
},
updateUserTwoDummy() {
this.send('updateNewUser', this.get('userTwoDummy'));
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
path: 'one',
queryParams: [
'id'
]
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
goToTwo() {
this.transitionToRoute('one.two', { queryParams: { id: '123' } });
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
didUpdateAttrs() {
console.log('updated : ');
console.log(this.get('user'));
}
});