gokatz
10/20/2016 - 9:54 AM

Component rerender

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}}
<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'));
  }
});