Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember Route Hook Order" />
<meta charset="utf-8">
<title>Ember Route Hook Order</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
  <script src="http://builds.emberjs.com/beta/ember.js"></script>
</head>
<body>
  
  <script type="text/x-handlebars">
    {{link-to 'Index' 'index'}}
    {{link-to 'Posts' 'posts'}}
    
    {{outlet}}
    
    {{render 'logs'}}
  </script>  
  
  <script type="text/x-handlebars" id='logs'>
     <h3>Logged Method Calls</h3>
     
     <a href="#" {{action 'clearLogs'}}>Clear Logs</a>
     <ul>
      {{#each}}
        <li>{{this}}</li>
      {{/each}}
    </ul>
  </script>
</body>
</html>
​
 
/* Put your CSS here */
html, body {
    margin: 20px;
}
 
​
​
App = Ember.Application.create();
​
App.logs = Ember.ArrayProxy.create({content: []});
​
App.Router.map(function() {
  this.resource('posts', function(){});
});
​
function loggingAlias(property){
  return function(){
    App.logs.pushObject(this._debugContainerKey + ' ' + property);
    return this._super.apply(this, arguments);
  };
}
​
App.LoggingRoute = Ember.Route.extend({
  enter: loggingAlias('enter (private)'),
  exit: loggingAlias('exit (private)'),
  activate: loggingAlias('activate'),
  deactivate: loggingAlias('deactivate'),
  serialize: loggingAlias('serialize'),
  deserialize: loggingAlias('deserialize (private)'),
  model: loggingAlias('model'),
  setupController: loggingAlias('setupController'),
  afterModel: loggingAlias('afterModel'),
  beforeModel: loggingAlias('beforeModel'),
  renderTemplate: loggingAlias('renderTemplate'),
  redirect: loggingAlias('redirect')
});
​
App.LogsController = Ember.ArrayController.extend({
  content: App.logs,
  actions: {
    clearLogs: function(){
      App.logs.clear();
    }
  }
});
​
App.ApplicationRoute = App.LoggingRoute.extend();
App.PostsRoute = App.LoggingRoute.extend();
App.PostsIndexRoute = App.LoggingRoute.extend();
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x