Property or Observes? EmberJS Explained

When to use which

While programming for Learning Spaces I had a lot of trouble choosing when to use .property('property to observe') or .observes('property to observe')

They behave the same, as in they run whenever the property between the ' ' changes. But there's a difference and you should know that difference.

Basically when you only manipulate other things you need observes and if you return something which you need later you need to use property

So let's say you have a BookController with some properties.

App.BookController = Ember.ObjectController.extend({  
    setPage: function() {
        var pageNumber = this.get('pageNumber');
        this.set('page', this.store.find('page', pageNumber));
    }.observes('pageNumber'),

    footNotes = function() {
        return this.get('page.footNotes')
    }.property('page'),

    copyright = function() {
        return '(c) Marthyn Olthof - Learning Spaces';
    }.property(),
});
setPage: function () {  
    var pageNumber = this.get('pageNumber');
    this.set('page', this.store.find('page', pageNumber));
}.observes('pageNumber'),

This is a function which sets the page property, but it doesn't return anything. Therefor we can just use the observes('pageNumber'). Which runs every time the property pageNumber changes. But it's impossible to bind this to a view!

footNotes = function () {  
    return this.get('page.footNotes');
}.property('page'),

Here footNotes is a property which returns the footnotes of a page. To update this property everytime the page changes and bind it to a view. We use property('page') with a binding to the property page. So everytime the page property changes the footnotes change too. Also you can now bind this to your view as such {{footNotes}}

copyright = function() {  
    return '(c) Marthyn Olthof - Learning Spaces';
}.property(),

Finally we have a property which doesn't change at all. Therefor we use property() without any binding. We can bind this to a view with {{copyright}} and it will not change unless the controller is initialized again.

For review, here is a table:

Bind in view/Returns Value Changes
.property('property to observe') Yes Yes
.observes('property to observe') No Yes
.property() Yes No