Merge pull request #11 from joostdevries/controllers-to-cli

Updated `controllers` to use Ember CLI

source/controllers/dependencies-between-controllers.md

@@ -2,12 +2,16 @@ Sometimes, especially when nesting resources, we find ourselves needing
 to have some kind of connection between two controllers. Let's take this
 router as an example:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+var Router = Ember.Router.extend({});
+
+Router.map(function() {
   this.resource("post", { path: "/posts/:post_id" }, function() {
     this.resource("comments", { path: "/comments" });
   });
 });
+
+export default Router;
 ```
 
 If we visit a `/posts/1/comments` URL, our `Post` model will get
@@ -18,8 +22,8 @@ some information about it in the `comments` template.
 To be able to do this we define our `CommentsController` to `need` the `PostController`
 which has our desired `Post` model.
 
-```javascript
-App.CommentsController = Ember.ArrayController.extend({
+```app/controllers/comments.js
+export default Ember.ArrayController.extend({
   needs: "post"
 });
 ```
@@ -28,7 +32,7 @@ This tells Ember that our `CommentsController` should be able to access
 its parent `PostController`, which can be done via `controllers.post`
 (either in the template or in the controller itself).
 
-```handlebars
+```app/templates/comments.hbs
 <h1>Comments for {{controllers.post.title}}</h1>
 
 <ul>
@@ -42,8 +46,8 @@ We can also create an aliased property to give ourselves a shorter way to access
 the `PostController` (since it is an `ObjectController`, we don't need
 or want the `Post` instance directly).
 
-```javascript
-App.CommentsController = Ember.ArrayController.extend({
+```app/controllers/comments.js
+export default Ember.ArrayController.extend({
   needs: "post",
   post: Ember.computed.alias("controllers.post")
 });
@@ -53,8 +57,8 @@ App.CommentsController = Ember.ArrayController.extend({
 If you want to connect multiple controllers together, you can specify an
 array of controller names:
 
-```javascript
-App.AnotherController = Ember.Controller.extend({
+```app/controllers/overview.js
+export default Ember.Controller.extend({
   needs: ['post', 'comments']
 });
 ```

source/controllers/index.md

@@ -15,10 +15,10 @@ Your `BlogPost` model would have properties like:
 * `body`
 * `author`
 
-Your template would bind to these properties in the `blog_post`
+Your template would bind to these properties in the `blog-post` 
 template:
 
-```handlebars
+```app/templates/blog-post.hbs
 <h1>{{title}}</h1>
 <h2>by {{author}}</h2>
 
@@ -41,7 +41,7 @@ toggle the display of the body section. To implement this, we would
 first modify our template to show the body only if the value of a
 new `isExpanded` property is true.
 
-```handlebars
+```app/templates/blog-post.hbs
 <h1>{{title}}</h1>
 <h2>by {{author}}</h2>
 
@@ -132,17 +132,16 @@ is always present. You could store a `search` property on your
 `ApplicationController`, and bind the search field in the `
 application` template to that property, like this:
 
-```handlebars
-<!-- application.handlebars -->
+```app/templates/application.hbs
 <header>
   {{input type="text" value=search action="query"}}
 </header>
 
 {{outlet}}
 ```
 
-```javascript
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
   // the initial value of the `search` property
   search: '',
 

source/controllers/representing-a-single-model-with-objectcontroller.md

@@ -9,17 +9,17 @@ the model.
 For example, imagine you are writing a music player. You have defined
 your `SongController` to represent the currently playing song.
 
-```javascript
-App.SongController = Ember.ObjectController.extend({
+```app/controllers/song.js
+export default Ember.ObjectController.extend({
   soundVolume: 1
 });
 ```
 
 In the Song route, you set the `model` of the controller to the
 currently playing song:
 
-```javascript
-App.SongRoute = Ember.Route.extend({
+```app/routes/song.js
+export default Ember.Route.extend({
   setupController: function(controller, song) {
     controller.set('model', song);
   }
@@ -29,7 +29,7 @@ App.SongRoute = Ember.Route.extend({
 In your template, you want to display the name of the currently playing
 song, as well as the volume at which it is playing.
 
-```handlebars
+```app/templates/song.hbs
 <p>
   <strong>Song</strong>: {{name}} by {{artist}}
 </p>
@@ -54,7 +54,7 @@ the model.
 
 For example, imagine we want to display the duration of the song:
 
-```handlebars
+```app/templates/song.hbs
 <p>
   <strong>Song</strong>: {{name}} by {{artist}}
 </p>
@@ -82,8 +82,8 @@ This is very easy to do by defining a computed property on the
 controller which transforms the model's value into a human-readable
 format for the template:
 
-```javascript
-App.SongController = Ember.ObjectController.extend({
+```app/controllers/song.js
+export default Ember.ObjectController.extend({
   duration: function() {
     var duration = this.get('model.duration'),
          minutes = Math.floor(duration / 60),

source/controllers/representing-multiple-models-with-arraycontroller.md

@@ -6,8 +6,8 @@ You can treat an `ArrayController` just like its underlying array. For
 example, imagine we want to display the current playlist. In our route,
 we setup our `SongsController` to represent the songs in the playlist:
 
-```javascript
-App.SongsRoute = Ember.Route.extend({
+```app/routes/songs.js
+export default Ember.Route.extend({
   setupController: function(controller, playlist) {
     controller.set('model', playlist.get('songs'));
   }
@@ -17,7 +17,7 @@ App.SongsRoute = Ember.Route.extend({
 In the `songs` template, we can use the `{{#each}}` helper to display
 each song:
 
-```handlebars
+```app/templates/songs.hbs
 <h1>Playlist</h1>
 
 <ul>
@@ -32,8 +32,8 @@ the models it represents. For example, imagine we want to display the
 number of songs that are over 30 seconds long. We can add a new computed
 property called `longSongCount` to the controller:
 
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
   longSongCount: function() {
     var longSongs = this.filter(function(song) {
       return song.get('duration') > 30;
@@ -45,7 +45,7 @@ App.SongsController = Ember.ArrayController.extend({
 
 Now we can use this property in our template:
 
-```handlebars
+```app/templates/songs.hbs
 <ul>
   {{#each song in model}}
     <li>{{song.name}} by {{song.artist}}</li>
@@ -60,8 +60,8 @@ Now we can use this property in our template:
 The `Ember.ArrayController` uses the [Ember.SortableMixin](http://emberjs.com/api/classes/Ember.SortableMixin.html) to allow sorting
 of content. There are two properties that can be set in order to set up sorting:
 
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
   sortProperties: ['name', 'artist'],
   sortAscending: true // false for descending
 });
@@ -73,8 +73,8 @@ It is often useful to specify a controller to decorate individual items in
 the `ArrayController` while iterating over them. This can be done by
 creating an `ObjectController`:
 
-```javascript
-App.SongController = Ember.ObjectController.extend({
+```app/controllers/song.js
+export default Ember.ObjectController.extend({
   fullName: function() {
 
     return this.get('name') + ' by ' + this.get('artist');
@@ -86,26 +86,26 @@ App.SongController = Ember.ObjectController.extend({
 Then, the `ArrayController` `itemController` property must be set to
 the decorating controller.
 
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
   itemController: 'song'
 });
 ```
 
-```handlebars
+```app/templates/songs.hbs
 {{#each item in controller}}
   <li>{{item.fullName}}</li>
 {{/each}}
 ```
 
 or you could setup the `itemController` directly in the template:
 
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
 });
 ```
 
-```handlebars
+```app/templates/songs.hbs
 {{#each item in controller itemController="song"}}
   <li>{{item.fullName}}</li>
 {{/each}}