From 02e929093dd8c1019cc1e58f8fcfb1b8ccb79534 Mon Sep 17 00:00:00 2001
From: Stefan Penner <stefan.penner@gmail.com>
Date: Fri, 27 Mar 2015 09:09:27 -0700
Subject: [PATCH 1/3] prefer non prototype extension annotation of computed
 properties

---
 source/concepts/what-is-ember-js.md           | 19 ++++---
 ...ng-a-single-model-with-objectcontroller.md | 10 ++--
 ...ng-multiple-models-with-arraycontroller.md | 10 ++--
 ..._to_your_components_based_on_properties.md |  4 +-
 .../basic_form_validations.md                 |  5 +-
 ..._strings_to_currency_with_accounting_js.md |  6 +-
 ...splaying_formatted_dates_with_moment_js.md | 11 ++--
 .../continuous_redrawing_of_views.md          | 56 ++++++++++---------
 ...playing_content_arrays_in_reverse_order.md |  8 +--
 source/models/defining-models.md              |  4 +-
 .../computed-properties-and-aggregate-data.md | 19 ++++---
 source/object-model/computed-properties.md    | 26 +++------
 source/object-model/observers.md              |  4 +-
 source/routing/query-params.md                |  4 +-
 source/templates/rendering-with-helpers.md    |  8 +--
 source/testing/testing-components.md          | 12 ++--
 source/testing/unit-testing-basics.md         |  4 +-
 .../record-lifecycle.md                       |  4 +-
 .../managing-asynchrony.md                    |  8 +--
 source/understanding-ember/run-loop.md        |  4 +-
 20 files changed, 113 insertions(+), 113 deletions(-)

diff --git a/source/concepts/what-is-ember-js.md b/source/concepts/what-is-ember-js.md
index ba1ce95ca..800b177bc 100644
--- a/source/concepts/what-is-ember-js.md
+++ b/source/concepts/what-is-ember-js.md
@@ -104,11 +104,11 @@ var president = Ember.Object.create({
   firstName: "Barack",
   lastName: "Obama",
 
-  fullName: function() {
+  fullName: Ember.computed(function() {
     return this.get('firstName') + ' ' + this.get('lastName');
 
   // Call this flag to mark the function as a property
-  }.property()
+  })
 });
 
 president.get('fullName');
@@ -124,15 +124,18 @@ You can tell Ember about these dependencies like this:
 
 ```javascript
 var president = Ember.Object.create({
-  firstName: "Barack",
-  lastName: "Obama",
+  init: function() {
+    this._super.apply(this, arguments);
+    this.set('firstName', 'Barack');
+    this.set('lastName', 'Obama');
+  },
 
-  fullName: function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     return this.get('firstName') + ' ' + this.get('lastName');
 
-  // Tell Ember that this computed property depends on firstName
-  // and lastName
-  }.property('firstName', 'lastName')
+    // Tell Ember that this computed property depends on firstName
+    // and lastName
+  })
 });
 ```
 
diff --git a/source/controllers/representing-a-single-model-with-objectcontroller.md b/source/controllers/representing-a-single-model-with-objectcontroller.md
index 0e42ba83e..018a0ccfe 100644
--- a/source/controllers/representing-a-single-model-with-objectcontroller.md
+++ b/source/controllers/representing-a-single-model-with-objectcontroller.md
@@ -84,13 +84,13 @@ format for the template:
 
 ```app/controllers/song.js
 export default Ember.ObjectController.extend({
-  duration: function() {
-    var duration = this.get('model.duration'),
-         minutes = Math.floor(duration / 60),
-         seconds = duration % 60;
+  duration: Ember.computed('model.duration', function() {
+    var duration = this.get('model.duration');
+    var minutes = Math.floor(duration / 60);
+    var seconds = duration % 60;
 
     return [minutes, seconds].join(':');
-  }.property('model.duration')
+  })
 });
 ```
 
diff --git a/source/controllers/representing-multiple-models-with-arraycontroller.md b/source/controllers/representing-multiple-models-with-arraycontroller.md
index cf4397280..0579cafed 100644
--- a/source/controllers/representing-multiple-models-with-arraycontroller.md
+++ b/source/controllers/representing-multiple-models-with-arraycontroller.md
@@ -34,12 +34,12 @@ property called `longSongCount` to the controller:
 
 ```app/controllers/songs.js
 export default Ember.ArrayController.extend({
-  longSongCount: function() {
+  longSongCount: Ember.computed('@each.duration', function() {
     var longSongs = this.filter(function(song) {
       return song.get('duration') > 30;
     });
     return longSongs.get('length');
-  }.property('@each.duration')
+  })
 });
 ```
 
@@ -75,11 +75,9 @@ creating an `ObjectController`:
  
 ```app/controllers/song.js
 export default Ember.ObjectController.extend({
-  fullName: function() {
- 
+  fullName: Ember.computed('name', 'artist', function() {
     return this.get('name') + ' by ' + this.get('artist');
- 
-  }.property('name', 'artist')
+  })
 });
 ```
  
diff --git a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
index 5b0473d68..0b5a308d7 100644
--- a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
+++ b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
@@ -17,9 +17,9 @@ You can also set the class name based on a computed property.
 
 ```js
 classNameBindings: ['isActive'],
-isActive: function() {
+isActive: Ember.computed('someAttribute', function() {
   return 'active';
-}.property('someAttribute')
+})
 ```
 
 Another way would be to bind the class name to a bound property.
diff --git a/source/cookbook/user_interface_and_interaction/basic_form_validations.md b/source/cookbook/user_interface_and_interaction/basic_form_validations.md
index fbb8e6038..0456826ed 100644
--- a/source/cookbook/user_interface_and_interaction/basic_form_validations.md
+++ b/source/cookbook/user_interface_and_interaction/basic_form_validations.md
@@ -16,11 +16,12 @@ been focused. The component expects to get the validation result as the
 export default Ember.Component.extend({
   beenFocused: false,
   valid: null,
-  hasError: function() {
+  hasError: Ember.computed('valid', 'beenFocused', function() {
     if (this.get('beenFocused')) {
       return !this.get('valid');
     }
-  }.property('valid', 'beenFocused'),
+  }),
+
   focusOut: function() {
     this.set('beenFocused', true);
   }
diff --git a/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md b/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
index 81bbd3a03..54d6940bc 100644
--- a/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
+++ b/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
@@ -10,15 +10,15 @@ Make use of the [computed property's setter][setters] to remove the
 display formatting and set the property to the proper value.
 
 ```js
-formattedAmount: function(key, value) {
+formattedAmount: Ember.computed('amount', function(key, value) {
   if (arguments.length > 1) {
     // setter
     var cleanAmount = accounting.unformat(value);
     this.set('amount', cleanAmount);
   }
-  
+
   return accounting.formatMoney(this.get('amount'));
-}.property('amount')
+});
 ```
 
 <!---#### Example
diff --git a/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md b/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
index 982ac2048..1bcf18f17 100644
--- a/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
+++ b/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
@@ -54,13 +54,14 @@ the same thing as Handlebars helpers defined above.
 
 ```app/controllers/application.js
 export default Ember.Controller.extend({
-  format: "YYYYMMDD",
+  format: 'YYYYMMDD',
   date: null,
-  formattedDate: function() {
-    var date = this.get('date'),
-        format = this.get('format');
+  formattedDate: Ember.computed('date', 'format', function() {
+    var date = this.get('date');
+    var  format = this.get('format');
+
     return moment(date).format(format);
-  }.property('date', 'format')
+  });
 });
 ```
 
diff --git a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
index ee2d7dd90..34e674387 100644
--- a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
+++ b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
@@ -28,18 +28,22 @@ another interval is triggered each time the property increases.
 
 ```app/services/clock.js
 export default Ember.Object.extend({
-    pulse: Ember.computed.oneWay('_seconds').readOnly(),
-    tick: function () {
-      var clock = this;
-      Ember.run.later(function () {
-        var seconds = clock.get('_seconds');
-        if (typeof seconds === 'number') {
-          clock.set('_seconds', seconds + (1/4));
-        }
-      }, 250);
-    }.observes('_seconds').on('init'),
-    _seconds: 0
-  });
+  init: function() {
+    this._super.apply(this, arguments);
+    this._seconds = 0;
+  },
+
+  pulse: Ember.computed.oneWay('_seconds').readOnly(),
+  tick: Ember.observer('_seconds', function () {
+    var clock = this;
+    Ember.run.later(function () {
+      var seconds = clock.get('_seconds');
+      if (typeof seconds === 'number') {
+        clock.set('_seconds', seconds + (1/4));
+      }
+    }, 250);
+  }).on('init')
+});
 ```
 
 ### Binding to the `pulse` attribute
@@ -69,20 +73,20 @@ a handful of properties used as conditions in the Handlebars template.
 
 ```app/controllers/interval.js
 export default Ember.ObjectController.extend({
-    secondsBinding: 'clock.pulse',
-    fullSecond: function () {
-      return (this.get('seconds') % 1 === 0);
-    }.property('seconds'),
-    quarterSecond: function () {
-      return (this.get('seconds') % 1 === 1/4);
-    }.property('seconds'),
-    halfSecond: function () {
-      return (this.get('seconds') % 1 === 1/2);
-    }.property('seconds'),
-    threeQuarterSecond: function () {
-      return (this.get('seconds') % 1 === 3/4);
-    }.property('seconds')
-  });
+  secondsBinding: 'clock.pulse',
+  fullSecond: Ember.computed('seconds', function () {
+    return (this.get('seconds') % 1 === 0);
+  }),
+  quarterSecond: Ember.computed('seconds', function () {
+    return (this.get('seconds') % 1 === 1/4);
+  }),
+  halfSecond: Ember.computed('seconds', function () {
+    return (this.get('seconds') % 1 === 1/2);
+  }),
+  threeQuarterSecond: Ember.computed('seconds', function () {
+    return (this.get('seconds') % 1 === 3/4);
+  })
+});
 ```
 
 A controller for a list of comments, each comment will have a new clock
diff --git a/source/cookbook/working_with_objects/displaying_content_arrays_in_reverse_order.md b/source/cookbook/working_with_objects/displaying_content_arrays_in_reverse_order.md
index 03e80a183..79b7e05ef 100644
--- a/source/cookbook/working_with_objects/displaying_content_arrays_in_reverse_order.md
+++ b/source/cookbook/working_with_objects/displaying_content_arrays_in_reverse_order.md
@@ -11,9 +11,9 @@ You want to display an Ember content array from an ArrayController in descending
 One way to achieve that is to extend `Ember.ArrayController` with a new function called `reverse`.
 You will also have to create a computed property:
 ```javascript
-reversedArray: function() {
-    return this.toArray().reverse();
-  }.property('myArray.@each')
+reversedArray: Ember.computed('myArray.[]', function() {
+  return this.toArray().reverse();
+})
 ```
 
 Once you do that, you will be able to use `reversedArray` property in your Handlebars template: `{{#each reversedArray}}{{/each}}`.
@@ -31,4 +31,4 @@ And in your template you will be able to consume a reversed array, like this: `{
 
 ### Example
 
-<a class="jsbin-embed" href="http://jsbin.com/opid/3/embed?html,js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
\ No newline at end of file
+<a class="jsbin-embed" href="http://jsbin.com/opid/3/embed?html,js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
diff --git a/source/models/defining-models.md b/source/models/defining-models.md
index 35ab576a6..48477857a 100644
--- a/source/models/defining-models.md
+++ b/source/models/defining-models.md
@@ -70,9 +70,9 @@ export default DS.Model.extend({
   firstName: attr(),
   lastName: attr(),
 
-  fullName: function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     return this.get('firstName') + ' ' + this.get('lastName');
-  }.property('firstName', 'lastName')
+  })
 });
 ```
 
diff --git a/source/object-model/computed-properties-and-aggregate-data.md b/source/object-model/computed-properties-and-aggregate-data.md
index 04b8d9b8d..9d6885522 100644
--- a/source/object-model/computed-properties-and-aggregate-data.md
+++ b/source/object-model/computed-properties-and-aggregate-data.md
@@ -6,16 +6,19 @@ Here's what that computed property might look like:
 
 ```app/controllers/todos.js
 export default Ember.Controller.extend({
-  todos: [
-    Ember.Object.create({ isDone: true }),
-    Ember.Object.create({ isDone: false }),
-    Ember.Object.create({ isDone: true })
-  ],
-
-  remaining: function() {
+  init: function() {
+    this._super.apply(this, arguments);
+    this.set('todos', [
+      { isDone: true  },
+      { isDone: false },
+      { isDone: true  }
+    ]);
+  },
+
+  remaining: Ember.computed('todos.@each.isDone', function() {
     var todos = this.get('todos');
     return todos.filterBy('isDone', false).get('length');
-  }.property('todos.@each.isDone')
+  })
 });
 ```
 
diff --git a/source/object-model/computed-properties.md b/source/object-model/computed-properties.md
index 9658549c6..65cbbeff2 100644
--- a/source/object-model/computed-properties.md
+++ b/source/object-model/computed-properties.md
@@ -14,9 +14,9 @@ Person = Ember.Object.extend({
   firstName: null,
   lastName: null,
 
-  fullName: function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     return this.get('firstName') + ' ' + this.get('lastName');
-  }.property('firstName', 'lastName')
+  })
 });
 
 var ironMan = Person.create({
@@ -30,16 +30,6 @@ Notice that the `fullName` function calls `property`. This declares the function
 
 Whenever you access the `fullName` property, this function gets called, and it returns the value of the function, which simply calls `firstName` + `lastName`.
 
-#### Alternate invocation
-
-At this point, you might be wondering how you are able to call the `.property` function on a function.  This is possible because Ember extends the `function` prototype.  More information about extending native prototypes is available in the [disabling prototype extensions guide](../../configuring-ember/disabling-prototype-extensions/). If you'd like to replicate the declaration from above without using these extensions you could do so with the following:
-
-```javascript
-  fullName: Ember.computed('firstName', 'lastName', function() {
-    return this.get('firstName') + ' ' + this.get('lastName');
-  })
-```
-
 ### Chaining computed properties
 
 You can use computed properties as values to create new computed properties. Let's add a `description` computed property to the previous example, and use the existing `fullName` property and add in some other properties:
@@ -51,13 +41,13 @@ Person = Ember.Object.extend({
   age: null,
   country: null,
 
-  fullName: function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     return this.get('firstName') + ' ' + this.get('lastName');
-  }.property('firstName', 'lastName'),
+  }),
 
-  description: function() {
+  description: Ember.computed('fullName', 'age', 'country', function() {
     return this.get('fullName') + '; Age: ' + this.get('age') + '; Country: ' + this.get('country');
-  }.property('fullName', 'age', 'country')
+  })
 });
 
 var captainAmerica = Person.create({
@@ -93,7 +83,7 @@ Person = Ember.Object.extend({
   firstName: null,
   lastName: null,
 
-  fullName: function(key, value, previousValue) {
+  fullName: Ember.computed('firstName', 'lastName', function(key, value, previousValue) {
     // setter
     if (arguments.length > 1) {
       var nameParts = value.split(/\s+/);
@@ -103,7 +93,7 @@ Person = Ember.Object.extend({
 
     // getter
     return this.get('firstName') + ' ' + this.get('lastName');
-  }.property('firstName', 'lastName')
+  })
 });
 
 
diff --git a/source/object-model/observers.md b/source/object-model/observers.md
index 74f3ce92d..0ff5c5e01 100644
--- a/source/object-model/observers.md
+++ b/source/object-model/observers.md
@@ -8,12 +8,12 @@ Person = Ember.Object.extend({
   firstName: null,
   lastName: null,
   
-  fullName: function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     var firstName = this.get('firstName');
     var lastName = this.get('lastName');
 
     return firstName + ' ' + lastName;
-  }.property('firstName', 'lastName'),
+  }),
 
   fullNameChanged: function() {
     // deal with the change
diff --git a/source/routing/query-params.md b/source/routing/query-params.md
index 97228811a..095b9104d 100644
--- a/source/routing/query-params.md
+++ b/source/routing/query-params.md
@@ -43,7 +43,7 @@ export default Ember.Controller.extend({
   queryParams: ['category'],
   category: null,
 
-  filteredArticles: function() {
+  filteredArticles: Ember.computed('category', 'model', function() {
     var category = this.get('category');
     var articles = this.get('model');
 
@@ -52,7 +52,7 @@ export default Ember.Controller.extend({
     } else {
       return articles;
     }
-  }.property('category', 'model')
+  })
 });
 ```
 
diff --git a/source/templates/rendering-with-helpers.md b/source/templates/rendering-with-helpers.md
index 154b519cc..5f6c9a1bb 100644
--- a/source/templates/rendering-with-helpers.md
+++ b/source/templates/rendering-with-helpers.md
@@ -35,9 +35,9 @@ export default Ember.View.extend({
 
   // A fullName property should probably go on App.Author,
   // but we're doing it here for the example
-  fullName: (function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     return this.get("author").get("firstName") + " " + this.get("author").get("lastName");
-  }).property("firstName","lastName")
+  })
 })
 ```
 
@@ -100,9 +100,9 @@ Total Posts: {{postCount}}
 
 ```app/controllers/author.js
 export default Ember.ObjectController.extend({
-  postCount: function() {
+  postCount: Ember.computed("model.posts.length", function() {
     return this.get("model.posts.length");
-  }.property("model.posts.[]")
+  })
 })
 ```
 
diff --git a/source/testing/testing-components.md b/source/testing/testing-components.md
index bde7cfe99..20789e88f 100644
--- a/source/testing/testing-components.md
+++ b/source/testing/testing-components.md
@@ -13,9 +13,9 @@ export default Ember.Component.extend({
   layout: layout,
   classNames: ['pretty-color'],
   attributeBindings: ['style'],
-  style: function() {
+  style: Ember.computed('name', function() {
     return 'color: ' + this.get('name') + ';';
-  }.property('name')
+  })
 });
 ```
 
@@ -214,9 +214,9 @@ export default Ember.Component.extend({
   layout: layout,
   tagName: 'img',
   attributeBindings: ['width', 'height', 'src'],
-  src: function() {
+  src: Ember.computed('width', 'height', function() {
     return 'http://placekitten.com/' + this.get('width') + '/' + this.get('height');
-  }.property('width', 'height')
+  })
 });
 ```
 
@@ -232,9 +232,9 @@ export default Ember.Component.extend({
   layout: layout,
   tagName: 'img',
   attributeBindings: ['width', 'height', 'src'],
-  src: function() {
+  src: Ember.computed('width', 'height',function() {
     return 'http://placekitten.com/' + this.get('width') + '/' + this.get('height');
-  }.property('width', 'height')
+  })
 });
 ```
 
diff --git a/source/testing/unit-testing-basics.md b/source/testing/unit-testing-basics.md
index b46403faf..5f3b7bdea 100644
--- a/source/testing/unit-testing-basics.md
+++ b/source/testing/unit-testing-basics.md
@@ -18,9 +18,9 @@ based on a `foo` property.
 export default Ember.Object.extend({
   foo: 'bar',
 
-  computedFoo: function() {
+  computedFoo: Ember.computed('foo', function() {
     return 'computed ' + this.get('foo');
-  }.property('foo')
+  })
 });
 ```
 
diff --git a/source/understanding-ember-data/record-lifecycle.md b/source/understanding-ember-data/record-lifecycle.md
index 9e2af30e6..03ab1538e 100644
--- a/source/understanding-ember-data/record-lifecycle.md
+++ b/source/understanding-ember-data/record-lifecycle.md
@@ -12,10 +12,10 @@ export default DS.Model.extend({
   lastName: DS.attr('string'),
   father: DS.belongsTo('Person'),
 
-  name: function() {
+  name: Ember.computed('firstName', 'lastName', function() {
     return this.get('firstName') + ' ' +
            this.get('lastName')
-  }.property('firstName', 'lastName')
+  })
 });
 ```
 
diff --git a/source/understanding-ember/managing-asynchrony.md b/source/understanding-ember/managing-asynchrony.md
index 7147ea395..0a9ac9691 100644
--- a/source/understanding-ember/managing-asynchrony.md
+++ b/source/understanding-ember/managing-asynchrony.md
@@ -87,9 +87,9 @@ export default Ember.Object.extend({
 
 ```app/controllers/post.js
 export default Ember.ObjectController.extend({
-  author: function() {
+  author: Ember.computed('salutation', 'name', function() {
     return [this.get('salutation'), this.get('name')].join(' ');
-  }.property('salutation', 'name')
+  })
 });
 ```
 
@@ -140,9 +140,9 @@ Let's take another look at the `author` computed property.
 
 ```app/controllers/post.js
 export default Ember.ObjectController.extend({
-  author: function() {
+  author: Ember.computed('salutation', 'name', function() {
     return [this.get('salutation'), this.get('name')].join(' ');
-  }.property('salutation', 'name')
+  })
 });
 ```
 
diff --git a/source/understanding-ember/run-loop.md b/source/understanding-ember/run-loop.md
index 8d5c06333..fea69a38e 100644
--- a/source/understanding-ember/run-loop.md
+++ b/source/understanding-ember/run-loop.md
@@ -54,9 +54,9 @@ Let's look at a similar example that is optimized in Ember, starting with a `Use
 var User = Ember.Object.extend({
   firstName: null,
   lastName: null,
-  fullName: function() {
+  fullName: Ember.computed('firstName', 'lastName', function() {
     return this.get('firstName') + ' ' + this.get('lastName');
-  }.property('firstName', 'lastName')
+  })
 });
 ```
 

From 8e76296f4dde64de51f7b83d50a57d11c9cc663a Mon Sep 17 00:00:00 2001
From: Stefan Penner <stefan.penner@gmail.com>
Date: Fri, 27 Mar 2015 09:09:54 -0700
Subject: [PATCH 2/3] prefer non prototype extension annotation of observers

---
 source/object-model/observers.md      | 34 ++++++++-------------------
 source/testing/unit-testing-basics.md |  4 ++--
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/source/object-model/observers.md b/source/object-model/observers.md
index 0ff5c5e01..b7b42a0eb 100644
--- a/source/object-model/observers.md
+++ b/source/object-model/observers.md
@@ -15,9 +15,9 @@ Person = Ember.Object.extend({
     return firstName + ' ' + lastName;
   }),
 
-  fullNameChanged: function() {
+  fullNameChanged: Ember.observer(function() {
     // deal with the change
-  }.observes('fullName').on('init')
+  }).on('init')
 });
 
 var person = Person.create({
@@ -40,12 +40,12 @@ is easy to introduce bugs where properties are not yet synchronized:
 
 ```javascript
 Person.reopen({
-  lastNameChanged: function() {
+  lastNameChanged: Ember.observer('lastName', function() {
     // The observer depends on lastName and so does fullName. Because observers
     // are synchronous, when this function is called the value of fullName is
     // not updated yet so this will log the old value of fullName
     console.log(this.get('fullName'));
-  }.observes('lastName')
+  })
 });
 ```
 
@@ -54,9 +54,9 @@ times when observing multiple properties:
 
 ```javascript
 Person.reopen({
-  partOfNameChanged: function() {
+  partOfNameChanged: Ember.observer('firstName', 'lastName', function() {
     // Because both firstName and lastName were set, this observer will fire twice.
-  }.observes('firstName', 'lastName')
+  })
 });
 
 person.set('firstName', 'John');
@@ -69,9 +69,9 @@ next run loop once all bindings are synchronized:
 
 ```javascript
 Person.reopen({
-  partOfNameChanged: function() {
+  partOfNameChanged: Ember.observer('firstName', 'lastName', function() {
     Ember.run.once(this, 'processFullName');
-  }.observes('firstName', 'lastName'),
+  }),
 
   processFullName: function() {
     // This will only fire once if you set two properties at the same time, and
@@ -98,9 +98,9 @@ Person = Ember.Object.extend({
     this.set('salutation', "Mr/Ms");
   },
 
-  salutationDidChange: function() {
+  salutationDidChange: Ember.observer('salutation', function() {
     // some side effect of salutation changing
-  }.observes('salutation').on('init')
+  }).on('init')
 });
 ```
 
@@ -118,20 +118,6 @@ observe it so you can update the DOM once the property changes.
 If you need to observe a computed property but aren't currently retrieving it,
 just get it in your init method.
 
-
-### Without prototype extensions
-
-You can define inline observers by using the `Ember.observer` method if you
-are using Ember without prototype extensions:
-
-```javascript
-Person.reopen({
-  fullNameChanged: Ember.observer('fullName', function() {
-    // deal with the change
-  })
-});
-```
-
 ### Outside of class definitions
 
 You can also add observers to an object outside of a class definition
diff --git a/source/testing/unit-testing-basics.md b/source/testing/unit-testing-basics.md
index 5f3b7bdea..a8df79d7f 100644
--- a/source/testing/unit-testing-basics.md
+++ b/source/testing/unit-testing-basics.md
@@ -114,9 +114,9 @@ Suppose we have an object that has a property and a method observing that proper
 export default Ember.Object.extend({
   foo: 'bar',
   other: 'no',
-  doSomething: function(){
+  doSomething: Ember.observer('foo', function(){
     this.set('other', 'yes');
-  }.observes('foo')
+  })
 });
 ```
 

From 45f5865e87b5246ea0305a8db9ed1d8eb3c2be11 Mon Sep 17 00:00:00 2001
From: Stefan Penner <stefan.penner@gmail.com>
Date: Fri, 27 Mar 2015 09:10:03 -0700
Subject: [PATCH 3/3] some misc formatting cleanup

---
 .../adding_google_analytics_tracking.md       |  4 +--
 ...ing_a_textfield_after_its_been_inserted.md |  4 +--
 .../continuous_redrawing_of_views.md          | 31 ++++++++++---------
 source/object-model/observers.md              | 20 ++++++++----
 4 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md b/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
index 5e489a6b4..3988697ee 100644
--- a/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
+++ b/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
@@ -40,12 +40,12 @@ var Router = Ember.Router.extend({
 });
 
 Router.reopen({
-  notifyGoogleAnalytics: function() {
+  notifyGoogleAnalytics: Ember.on('didTransition', function() {
     return ga('send', 'pageview', {
         'page': this.get('url'),
         'title': this.get('url')
       });
-  }.on('didTransition')
+  })
 });
 
 export default Router;
diff --git a/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md b/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
index ba8ec18c6..47655ead2 100644
--- a/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
+++ b/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
@@ -8,9 +8,9 @@ to the text field by accessing the components's jQuery `$` property:
 
 ```app/components/focus-input.js
 export default Ember.TextField.extend({
-  becomeFocused: function() {
+  becomeFocused: Ember.on('didInsertElement', function() {
     this.$().focus();
-  }.on('didInsertElement')
+  })
 });
 ```
 
diff --git a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
index 34e674387..84b15814a 100644
--- a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
+++ b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
@@ -27,6 +27,9 @@ of the interval. Since the `tick` method observes the incremented property
 another interval is triggered each time the property increases.
 
 ```app/services/clock.js
+var observer = Ember.observer;
+var on = Ember.on;
+
 export default Ember.Object.extend({
   init: function() {
     this._super.apply(this, arguments);
@@ -34,7 +37,7 @@ export default Ember.Object.extend({
   },
 
   pulse: Ember.computed.oneWay('_seconds').readOnly(),
-  tick: Ember.observer('_seconds', function () {
+  tick: on(observer('_seconds', function () {
     var clock = this;
     Ember.run.later(function () {
       var seconds = clock.get('_seconds');
@@ -42,7 +45,7 @@ export default Ember.Object.extend({
         clock.set('_seconds', seconds + (1/4));
       }
     }, 250);
-  }).on('init')
+  }), 'init')
 });
 ```
 
@@ -96,7 +99,7 @@ comment was created.
 
 ```app/controllers/comment-item.js
 export default Ember.ObjectController.extend({
-    seconds: Ember.computed.oneWay('clock.pulse').readOnly()
+  seconds: Ember.computed.oneWay('clock.pulse').readOnly()
 });
 ```
 
@@ -104,18 +107,18 @@ export default Ember.ObjectController.extend({
 import ClockService from '../services/clock';
 
 export default Ember.ArrayController.extend({
-    itemController: 'commentItem',
-    comment: null,
-    actions: {
-      add: function () {
-        this.addObject(Em.Object.create({
-          comment: this.get('comment'),
-          clock: ClockService.create()
-        }));
-        this.set('comment', null);
-      }
+  itemController: 'commentItem',
+  comment: null,
+  actions: {
+    add: function () {
+      this.addObject(Em.Object.create({
+        comment: this.get('comment'),
+        clock: ClockService.create()
+      }));
+      this.set('comment', null);
     }
-  });
+  }
+});
 ```
 
 ### Handlebars template which displays the `pulse`
diff --git a/source/object-model/observers.md b/source/object-model/observers.md
index b7b42a0eb..ca2bce3d4 100644
--- a/source/object-model/observers.md
+++ b/source/object-model/observers.md
@@ -3,21 +3,25 @@ You can set up an observer on an object by using the `observes`
 method on a function:
 
 ```javascript
+var computed = Ember.computed;
+var observer = Ember.observer;
+var on = Ember.on;
+
 Person = Ember.Object.extend({
   // these will be supplied by `create`
   firstName: null,
   lastName: null,
   
-  fullName: Ember.computed('firstName', 'lastName', function() {
+  fullName: computed('firstName', 'lastName', function() {
     var firstName = this.get('firstName');
     var lastName = this.get('lastName');
 
     return firstName + ' ' + lastName;
   }),
 
-  fullNameChanged: Ember.observer(function() {
+  fullNameChanged: on('init', observer('fullName', function() {
     // deal with the change
-  }).on('init')
+  }))
 });
 
 var person = Person.create({
@@ -90,17 +94,21 @@ Observers never fire until after the initialization of an object is complete.
 
 If you need an observer to fire as part of the initialization process, you
 cannot rely on the side effect of set. Instead, specify that the observer
-should also run after init by using `.on('init')`:
+should also run after init by using `Ember.on('init')`:
 
 ```javascript
+var observer = Ember.observer;
+var on = Ember.on;
+
 Person = Ember.Object.extend({
   init: function() {
+    this._super.apply(this, arguments);
     this.set('salutation', "Mr/Ms");
   },
 
-  salutationDidChange: Ember.observer('salutation', function() {
+  salutationDidChange: on('init', observer('salutation', function() {
     // some side effect of salutation changing
-  }).on('init')
+  }))
 });
 ```