Jak przekazywać wydarzenia do rodzica Widok, przekazywanie dziecka Widok, który spowodował wydarzenie?

Question

Rozważmy View, który określa listę obiektów:

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

    itemClicked: function(item){ 

    } 
)}; 

z szablonem:

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

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

Więc w zasadzie moje pytanie brzmi: w jaki sposób mogę przekazać zdarzeń do widoków nadrzędnych, szczególnie w przypadku, gdy widok nadrzędny nie jest znany w widoku podrzędnym? Rozumiem, że można uzyskać właściwość foo obiektu parentView z wartością this.getPath('parentView').get('foo') lub this.getPath('contentView').get('foo'). Ale co z funkcją (w tym przypadku, itemclicked())?

Answer 1

this.get('parentView').itemClicked(this.get('item')); powinien załatwić sprawę.

Answer 2

Można użyć {{action}} pomocnika, patrz: http://jsfiddle.net/smvv5/

Szablon:

<script type="text/x-handlebars" > 
    {{#view App.ListsView}} 
     {{#each items}} 
      {{#view App.ListView itemBinding="this" }} 
       <li {{action "clicked" target="parentView" }} >{{item.text}}</li> 
      {{/view}} 
     {{/each}} 
    {{/view}} 
</script>​ 

JS:

App = Ember.Application.create({}); 

App.Foo = Ember.ArrayProxy.create({ 
    content: [Ember.Object.create({ 
     text: 'hello' 
    }), Ember.Object.create({ 
     text: 'action' 
    }), Ember.Object.create({ 
     text: 'world' 
    })] 
}); 
App.ListsView = Ember.View.extend({ 
    itemsBinding: 'App.Foo', 
    clicked: function(view, event, ctx) { 
     console.log(Ember.getPath(ctx, 'item.text')); 
    } 
}); 
App.ListView = Ember.View.extend({ 
});​ 

Answer 3

Najnowsze wersje Ember użyć actions hash zamiast metod bezpośrednio na obiekt (mimo że ta przestarzała metoda jest nadal obsługiwana, może nie być długa). Jeśli chcesz odwołać się do widoku przekazanego do handler'a, wyślij jako parametr "view" i użyj celu jako parentView.

<button {{action "onClicked" view target="view.parentView"}}>Click me.</button> 

App.ListsView = Ember.View.extend({ 
    actions: { 
     onClicked: function(view) { 
     } 
    } 
}); 

{{action}} pomocnik nie wysyła za pośrednictwem obiektu zdarzenia. Nadal nie wiesz, jak uzyskać odniesienie do wydarzenia, jeśli go potrzebujesz.

source