Come passare eventi a una vista padre, passando la vista figlio che ha attivato l'evento?

Question

consideri una visualizzazione che definisce un elenco di oggetti:

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

    itemClicked: function(item){ 

    } 
)}; 

con il modello:

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

e l'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 
    } 
}) 

Quindi, in pratica la mia domanda è: come faccio a passare eventi alle viste genitore, specialmente nel caso in cui la vista genitore non sia conosciuta dalla vista figlio? Comprendo che è possibile ottenere una proprietà foo di un parentView con this.getPath('parentView').get('foo') o this.getPath('contentView').get('foo'). Ma che dire di una funzione (in questo caso, itemclicked())?

Answer 1

this.get('parentView').itemClicked(this.get('item')); dovrebbe fare il trucco.

Answer 2

È possibile utilizzare il {{action}} aiutante, si veda: http://jsfiddle.net/smvv5/

Template:

<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

versioni recenti di Ember utilizzare il actions hash invece di metodi direttamente sul oggetto (sebbene questo metodo deprecato sia ancora supportato, potrebbe non essere a lungo). Se si desidera un riferimento alla vista passata al gestore, inviare tramite "Visualizza" come parametro e utilizzare lo parentView come destinazione.

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

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

{{action}} aiutante non invia tramite l'oggetto evento. Non sei ancora sicuro su come ottenere un riferimento all'evento se ne hai bisogno.

source