prefer non prototype extension annotation of computed properties

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
+  })
 });
 ```
 

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')
+  })
 });
 ```
 

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')
+  })
 });
 ```
 

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.

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);
   }

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

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')
+  });
 });
 ```
 

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

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>
+<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>

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')
+  })
 });
 ```
 

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')
+  })
 });
 ```
 

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')
+  })
 });
 
 

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

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')
+  })
 });
 ```