CODEWITHSUNDEEP
ember.js
AyKarsi
AyKarsi

Reputation: 9685

Ember.js: Action Propagation

I have the following setup:

A ListRoute which has an action doNext. An ItemRoute (Detail) which also has an event doNext.

App.Router.map(function () {               
  this.resource('list', function() {
     this.route('item');
  })
});

App.ListRoute = Ember.Route.extend({
    actions:{
        doNext:function() {
            alert("doNext from List Route!");
        }
    }
})
App.ListItemRoute = Ember.Route.extend({
    actions:{
        doNext:function() {
            alert("doNext from List Item Route");    
        }
    }
})

When clicking on an {{action doNext}} inside the List it fires the correct action in the List Route. But when I click on the same link, after I have transitioned int the item, the action of the List Item Route gets fired. I would have expected, that the action would still get sent to the ListRoute.

Is this by design? And is there a way to force my expected behavior?

I've created a fiddle which where you can see this: http://jsfiddle.net/AyKarsi/HA93a/4/

Upvotes: 0

Views: 302

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

it's how actions occur, it doesn't matter which template you click the action from, just what route you're in, it starts at the very top, then if it doesn't find it, it goes up the chain. This allows you to send the same action from random places in your application and have them propagate up, or be overridden by the highest/deepest available route.

Your jsfiddle's template name was wrong btw, it should be resource/route

http://jsfiddle.net/HA93a/6/

the best way around it would be to use different names in your actions if you don't want the same action name to have that issue. Honestly it's a little weird in my opinion, and maybe someone should complain, but it was by design.

Upvotes: 1

Related Questions