gokatz
3/15/2016 - 7:22 AM

New Twiddle

New Twiddle

{
  "version": "0.6.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "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.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember-template-compiler.js"
  }
}
import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
	this.route('my-route', { path: '/' });
	this.route('page-two');
});

export default Router;
page two

{{link-to 'go to page one' 'my-route'}}
import Ember from 'ember';

export default Ember.Route.extend({

actions: {
willTransition() {
	this._super(...arguments);
	console.clear();
	console.log(`--------going to page one -------`);
  }
}
});
import Ember from 'ember';

let template = function () {
	console.log(`templateName`);
	return `my-page`;
};

let controller = function () {
	console.log(`controllerName`);
	return `my-page`;
};

export default Ember.Route.extend({
activate() {
	this._super(...arguments);
	console.log('activate');
},
beforeModel() {
	this._super(...arguments);
	console.log('beforeModel');
},
model() {
	console.log('model');
	return new Ember.RSVP.Promise(function(resolve, reject) {
 		Ember.run.later(this, () => {
		 resolve({ date: new Date() });
    }, 3000);
  }).then((json) => {
 	return json;
  });
},
afterModel() {
	this._super(...arguments);
		console.log('afterModel');
},
setupcontroller() {
	this._super(...arguments);
  	console.log('setupcontroller');
},

templateName: template(),

controllerName: controller(),

resetController() {
	this._super(...arguments);
  	console.log('resetController');
},

deactivate() {
	this._super(...arguments);
	console.log('deactivate');
},

  
actions: {
willTransition() {
	this._super(...arguments);
		console.log('willtransition');
},
didTransition() {
	this._super(...arguments);
	console.log('didTransition');
	Ember.run.later(this, () => {
    console.log(`----going to page 2----`);
		this.transitionTo('page-two');
  }, 2000);
},

loading() {
	this._super(...arguments);
	console.log('loading');
}
}
});
{{msg}}
<br>
<br>
Today is {{model.date}}
<br>
<br>
Check Console
import Ember from 'ember';

export default Ember.Controller.extend({
	msg : `good day to you`
});
Open console and click on the link below <br>
{{link-to 'page-one' 'my-route'}}
<h1>Order of execution of route methods</h1>
<br>
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});