update templates section to use CLI syntax

source/stylesheets/site.css.scss

@@ -796,6 +796,12 @@ a.toc-anchor {
     th, td {
       padding: 5px 10px;
     }
+
+    &.specific {
+      th, td {
+        padding: 5px 6px;
+      }
+    }
   }
 
   .note {

source/templates/actions.md

@@ -9,9 +9,7 @@ You can use the `{{action}}` helper to make an HTML element clickable.
 When a user clicks the element, the named event will be sent to your
 application.
 
-```handlebars
-<!-- post.handlebars -->
-
+```app/templates/post.hbs
 <div class='intro'>
   {{intro}}
 </div>
@@ -24,8 +22,8 @@ application.
 {{/if}}
 ```
 
-```js
-App.PostController = Ember.ObjectController.extend({
+```app/controllers/post.js
+export default Ember.ObjectController.extend({
   // initial value
   isExpanded: false,
 
@@ -72,8 +70,8 @@ a method directly on the controller, it is strongly recommended that you
 put your action handling methods inside an `actions` hash for forward
 compatibility.
 
-```js
-App.PostRoute = Ember.Route.extend({
+```app/routes/post.js
+export default Ember.Route.extend({
   actions: {
     expand: function() {
       this.controller.set('isExpanded', true);
@@ -91,8 +89,8 @@ that when executed, `this` is the route, not the `actions` hash.
 
 To continue bubbling the action, you must return true from the handler:
 
-```js
-App.PostRoute = Ember.Route.extend({
+```app/routes/post.js
+export default Ember.Route.extend({
   actions: {
     expand: function() {
       this.controller.set('isExpanded', true);
@@ -117,7 +115,7 @@ When an action is triggered, but no matching action handler is
 implemented on the controller, the current route, or any of the
 current route's ancestors, an error will be thrown.
 
-![Action Bubbling](../images/template-guide/action-bubbling.png)
+![Action Bubbling](/images/template-guide/action-bubbling.png)
 
 This allows you to create a button that has different behavior based on
 where you are in the application. For example, you might want to have a
@@ -140,8 +138,8 @@ For example, if the `post` argument was passed:
 The controller's `select` action handler would be called with a single argument
 containing the post model:
 
-```js
-App.PostController = Ember.ObjectController.extend({
+```app/controllers/post.js
+export default Ember.ObjectController.extend({
   actions: {
     select: function(post) {
       console.log(post.get('title'));
@@ -176,11 +174,9 @@ pressed modifier keys. You can supply an `allowedKeys` option
 to specify which keys should not be ignored.
 
 ```handlebars
-<script type="text/x-handlebars" data-template-name='a-template'>
-  <div {{action 'anActionName' allowedKeys="alt"}}>
-    click me
-  </div>
-</script>
+<div {{action 'anActionName' allowedKeys="alt"}}>
+  click me
+</div>
 ```
 
 This way the `{{action}}` will fire when clicking with the alt key
@@ -228,8 +224,8 @@ is most commonly used to send actions to a view instead of a controller.
 
 You would handle this in an `actions` hash on your view.
 
-```javascript
-App.PostsIndexView = Ember.View.extend({
+```app/views/posts.js
+export default Ember.View.extend({
   actions: {
     select: function(post) {
       // do your business.

source/templates/binding-element-attributes.md

@@ -56,15 +56,15 @@ renders the following HTML:
 <input id="ember257" class="ember-view ember-text-field" type="text" title="Name">
 ```
 
-There are two ways to enable support for data attributes. One way would be to add an 
+There are two ways to enable support for data attributes. One way would be to add an
 attribute binding on the view, e.g. `Ember.LinkView` or `Ember.TextField` for the specific attribute:
 
 ```javascript
-Ember.LinkView.reopen({
+export default Ember.LinkView.reopen({
   attributeBindings: ['data-toggle']
 });
 
-Ember.TextField.reopen({
+export default Ember.TextField.reopen({
   attributeBindings: ['data-toggle', 'data-placement']
 });
 ```
@@ -74,15 +74,15 @@ Now the same handlebars code above renders the following HTML:
 ```html
 <a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>
 
-<input id="ember259" class="ember-view ember-text-field" 
+<input id="ember259" class="ember-view ember-text-field"
        type="text" data-toggle="tooltip" data-placement="bottom" title="Name">
 ```
 
 You can also automatically bind data attributes on the base view with the
 following:
 
 ```javascript
-Ember.View.reopen({
+export default Ember.View.reopen({
   init: function() {
     this._super();
     var self = this;

source/templates/binding-element-class-names.md

@@ -130,4 +130,3 @@ order:
   Warning!
 </div>
 ```
-

source/templates/development-helpers.md

@@ -24,7 +24,6 @@ you the ability to inspect the current rendering context:
 ```handlebars
 {{debugger}}
 ```
-
 Just before the helper is invoked two useful variables are defined:
 
 * `templateContext` The current context that variables are fetched from. This

source/templates/handlebars-basics.md

@@ -9,48 +9,11 @@ describing the user interface of your app. And, once you've told
 Ember.js to render a given template on the screen, you don't need to
 write any additional code to make sure it keeps up-to-date.
 
-If you'd prefer an indentation-based alternative to Handlebars syntax,
-try [Emblem.js](http://www.emblemjs.com), but make sure you're comfortable
-with Handlebars first!
-
 ### Defining Templates
 
-If you're not using build tools, you can define your application's main
-template inside your HTML by putting it inside a `<script>` tag, like so:
-
-```html
-<html>
-  <body>
-    <script type="text/x-handlebars">
-      Hello, <strong>{{firstName}} {{lastName}}</strong>!
-    </script>
-  </body>
-</html>
-```
-
-This template will be compiled automatically and become your
-[application template](../../templates/the-application-template),
-which will be displayed on the page when your app loads.
+By default, adjust your [application template](../the-application-template), that is created automatically for you and will be displayed on the page when your app loads.
 
-You can also define templates by name that can be used later. For
-example, you may want to define a reusable control that is used in many
-different places in your user interface. To tell Ember.js to save the
-template for later, instead of displaying it immediately, you can add
-the `data-template-name` attribute:
-
-```html
-<html>
-  <head>
-    <script type="text/x-handlebars" data-template-name="say-hello">
-      <div class="my-cool-control">{{name}}</div>
-    </script>
-  </head>
-</html>
-```
-
-If you are using build tools to manage your application's assets, most
-will know how to precompile Handlebars templates and make them available
-to Ember.js.
+You can also define templates by name that can be used later. If you would like to create a template that is shared across many areas of your site, you should investigate [components](../../components/defining-a-component/). The components section information on creating a re-usable template.
 
 ### Handlebars Expressions
 
@@ -68,13 +31,14 @@ This would look up the `firstName` and `lastName` properties from the
 controller, insert them into the HTML described in the template, then
 put them into the DOM.
 
-By default, your top-most application template is bound to your `ApplicationController`:
+By default, your top-most application template is bound to your application controller. Note that this file is not shown by default because it is created behind the scenes by Ember CLI. To customize the controller, create the following file:
 
-```javascript
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
   firstName: "Trek",
   lastName: "Glowacki"
 });
+
 ```
 
 The above template and controller would combine to display the following

source/templates/links.md

@@ -2,8 +2,8 @@
 
 You create a link to a route using the `{{link-to}}` helper.
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource("photos", function(){
     this.route("edit", { path: "/:photo_id" });
   });
@@ -59,8 +59,8 @@ The `{{link-to}}` helper takes:
 If the route is nested, you can supply a model or an identifier for each dynamic
 segment.
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource("photos", function(){
     this.resource("photo", { path: "/:photo_id" }, function(){
       this.route("comments");