Come passare eventi per un genitore Vista, passando il bambino Vista che ha scatenato l'evento?

Question

Si consideri una Vista 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 il 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 gli eventi del genitore, vista, soprattutto nel caso in cui il genitore punto di vista non è conosciuto da bambino vista?Capisco che si può 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}} helper, vedere: http://jsfiddle.net/smvv5/

Modello:

<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

Le versioni recenti di Ember usano il actions Hash invece di metodi direttamente sull'oggetto (sebbene questo metodo deprecato sia ancora supportato, potrebbe non essere a lungo). Se si desidera un riferimento alla vista passata al gestore, invia attraverso "vista" come parametro e usa il parentView come bersaglio.

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

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

{{action}} Helper non invia tramite l'oggetto evento. Ancora non sono sicuro di come ottenere riferimento all'evento se ne hai bisogno.

fonte