givanse · August 29, 2015 14:01
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="Action Bubbling With Nested Routes" />
 <!-- http://emberjs.jsbin.com/latib/1/edit?html,js,console,output -->
 <meta charset="utf-8">
 <title>Ember Starter Kit</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.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
 </head>
 <body>

  <script type="text/x-handlebars">
    {{#link-to 'parent'}}parent view{{/link-to}}<br>
    {{#link-to 'child'}}child view{{/link-to}}<br>
    {{#link-to 'child.grandson'}}grandson view{{/link-to}}<br>
    
    <br>path: {{currentPath}}<br>
    
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="parent">
    <h2>Parent</h2>
    foobar: <b>{{bind foobar}}</b>
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="child">
    <h2>Child</h2>
    {{outlet}}
  </script>
  
  <!-- 
    The 'changed' event generated by a checkbox in this view will
    bubble up from the View to the Route and from there 
    to its parent routes.
    -->
  <script type="text/x-handlebars" data-template-name="child/grandson">
    <h2>Grandson</h2>
    A lonely checkbox: 
    {{view Ember.Checkbox checkedBinding="isEnabled"}}
  </script>
  
 </body>
 </html>
diff --git a/index.js b/index.js
 /**
 * Open the console to better see the order of the events.
 */

 console.log('Bubble up from View to Route:');

 App = Ember.Application.create();

 App.Router.map(function() { 
  this.resource('parent', function () {
    this.resource('child', function () {
      this.route('grandson');
    });
  });
 });

 // Routes

 App.IndexRoute = Ember.Route.extend({
  renderTemplate: function () {
    this.transitionTo('child.grandson');
  }
 });

 App.ApplicationRoute = Ember.Route.extend({
  actions: {
    change: function () {
      console.log('change: application');
      return true;
    }
  }
 });

 App.ParentRoute = Ember.Route.extend({
  actions: {
    change: function () {
      console.log('change: route - parent');
      // Note: 'this' is the route, not the actions hash. 
      this.controller.toggle();
      return true;
    }
  }
 });

 App.ChildRoute = Ember.Route.extend({
  actions: {
    change: function () {
      console.log('change: route - child');
      return true;
    }
  }
 });

 App.ChildGrandsonRoute = Ember.Route.extend({
  actions: {
    // If we delete this method, the event 
    // still bubbles up until a false or 
    // ApplicationRoute is reached
    change: function () {
      console.log('change: route - child/grandson');
      return true;
    }
  }
 });

 // Controllers

 App.ParentController = Ember.Controller.extend({
  foobar: true,
  toggle: function () {
    this.set('foobar', ! this.get('foobar'));
  }
 });

 App.ChildGrandsonController = Ember.Controller.extend({
  isEnabled: true,
  actions: {
    // If we delete this method, the event 
    // still bubbles up
    change: function () {
      console.log('change: controller');
      return true;
    }
  }
 });

 // Views

 App.ChildGrandsonView = Ember.View.extend({
  change: function (evt) {
    console.log('change: view');
    this.get('controller').send('change');
  }
 });
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Action Bubbling With Nested Routes" />
	<!-- http://emberjs.jsbin.com/latib/1/edit?html,js,console,output -->
	<meta charset="utf-8">
	<title>Ember Starter Kit</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.3.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
	</head>
	<body>

	<script type="text/x-handlebars">
	{{#link-to 'parent'}}parent view{{/link-to}}<br>
	{{#link-to 'child'}}child view{{/link-to}}<br>
	{{#link-to 'child.grandson'}}grandson view{{/link-to}}<br>

	<br>path: {{currentPath}}<br>

	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="parent">
	<h2>Parent</h2>
	foobar: <b>{{bind foobar}}</b>
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="child">
	<h2>Child</h2>
	{{outlet}}
	</script>

	<!--
	The 'changed' event generated by a checkbox in this view will
	bubble up from the View to the Route and from there
	to its parent routes.
	-->
	<script type="text/x-handlebars" data-template-name="child/grandson">
	<h2>Grandson</h2>
	A lonely checkbox:
	{{view Ember.Checkbox checkedBinding="isEnabled"}}
	</script>

	</body>
	</html>
	/**
	* Open the console to better see the order of the events.
	*/

	console.log('Bubble up from View to Route:');

	App = Ember.Application.create();

	App.Router.map(function() {
	this.resource('parent', function () {
	this.resource('child', function () {
	this.route('grandson');
	});
	});
	});

	// Routes

	App.IndexRoute = Ember.Route.extend({
	renderTemplate: function () {
	this.transitionTo('child.grandson');
	}
	});

	App.ApplicationRoute = Ember.Route.extend({
	actions: {
	change: function () {
	console.log('change: application');
	return true;
	}
	}
	});

	App.ParentRoute = Ember.Route.extend({
	actions: {
	change: function () {
	console.log('change: route - parent');
	// Note: 'this' is the route, not the actions hash.
	this.controller.toggle();
	return true;
	}
	}
	});

	App.ChildRoute = Ember.Route.extend({
	actions: {
	change: function () {
	console.log('change: route - child');
	return true;
	}
	}
	});

	App.ChildGrandsonRoute = Ember.Route.extend({
	actions: {
	// If we delete this method, the event
	// still bubbles up until a false or
	// ApplicationRoute is reached
	change: function () {
	console.log('change: route - child/grandson');
	return true;
	}
	}
	});

	// Controllers

	App.ParentController = Ember.Controller.extend({
	foobar: true,
	toggle: function () {
	this.set('foobar', ! this.get('foobar'));
	}
	});

	App.ChildGrandsonController = Ember.Controller.extend({
	isEnabled: true,
	actions: {
	// If we delete this method, the event
	// still bubbles up
	change: function () {
	console.log('change: controller');
	return true;
	}
	}
	});

	// Views

	App.ChildGrandsonView = Ember.View.extend({
	change: function (evt) {
	console.log('change: view');
	this.get('controller').send('change');
	}
	});