Search code examples
ember.jsactionobservers

Ember observer / action syntax differences


I've read the documentation about the actions hash, but in every example I can find, people leave off the action: when observers are used.

like this one:

https://www.airpair.com/ember.js/posts/top-mistakes-ember-rails#6-properties-and-observes

They favor the action name direction under the extend definition just like how properties are defined, and an anonymous function is defined wtihin that property.

App.PostRoute = Ember.Route.extend({
  actions: {
    expand: function() {
      this.controller.set('isExpanded', true);
    }.observes('aProperty')
  }
});

vs

App.PostRoute = Ember.Route.extend({
  expand: function() {
    this.controller.set('isExpanded', true);
  }.observes('aProperty)
});

My question is what are the differences between these two ways?

Does it not bubble up if you don't use actions:?

If you don't use actions:, does it not bubble up to routes?

And most importantly, what does this mean for using observers?

http://emberjs.com/api/classes/Ember.ActionHandler.html#property_actions


Solution

  • Actions and observers are two entirely different things.

    Actions handle actions invoked from templates via {{action}}, and actions invoked from JavaScript via send. Yes, they must be in an actions hash. Otherwise, they will not be found, much less bubbled.

    Observers are just observers, and you can put them anywhere you want to observe something.

    In your example, you given an action with an observes. What is the use case for that? What would you be trying to accomplish? It would seem to be both an action and an observer, which is a pattern I have never seen before and which doesn't seem too useful.