How to pass events to a parent View, passing the child View that triggered the event?

Question

Consider a View that defines a list of objects:

App.ListView = Ember.View({
  items: 'App.FooController.content'

  itemClicked: function(item){

  }
)};

with the template:

<ul>
{{#each items}}
    {{#view App.ItemView itemBinding="this" tagName="li"}}
      <!-- ... -->
    {{/view}}
{{/each}}
</ul>

and the ItemView:

App.ItemView = Ember.View.extend({

  click: function(event){

    var item = this.get('item');

    // I want to call function itemClicked(item) of parentView
    // so that it handles the click event
  }
})

So basically my question is how do I pass events to parent views, especially in the case where the parent view is not known by the child view? I understand that you can get a property foo of a parentView with either this.getPath('parentView').get('foo') or this.getPath('contentView').get('foo'). But what about a function (in this case, itemclicked())?

Answer 1

this.get('parentView').itemClicked(this.get('item')); should do the trick.