Cómo pasar eventos a una Vista principal, pasando al niño Vista que desencadenó el evento?

Question

Considérese una vista que define una lista de objetos:

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

    itemClicked: function(item){ 

    } 
)}; 

con la plantilla:

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

y la 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 
    } 
}) 

Así que básicamente mi pregunta es ¿cómo puedo pasar las vistas de eventos a padres, especialmente en el caso donde la vista secundaria no es conocida por la vista secundaria? Entiendo que puede obtener una propiedad foo de parentView con this.getPath('parentView').get('foo') o this.getPath('contentView').get('foo'). Pero, ¿qué pasa con una función (en este caso, itemclicked())?

Answer 1

this.get('parentView').itemClicked(this.get('item')); deberían hacer el truco.

Answer 2

Usted puede utilizar el ayudante {{action}}, ver: http://jsfiddle.net/smvv5/

Plantilla:

<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

Las versiones recientes de Ember usar el hash actions en lugar de métodos directamente en el objeto (aunque este método desaprobado aún se admite, puede que no sea por mucho tiempo). Si desea una referencia a la vista pasada al controlador, envíe a través de "ver" como parámetro y use el parentView como destino.

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

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

{{action}} ayudante no envía a través del objeto de evento. Aún no estoy seguro de cómo obtener una referencia del evento si lo necesita.

source