Comment passer des événements à une vue parent, en passant la vue enfant qui a déclenché l'événement?

Question

Considérez une vue qui définit une liste d'objets:

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

  itemClicked: function(item){

  }
)};

avec le modèle:

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

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

Ma question est donc de savoir comment transmettre des événements aux vues parent, en particulier dans le cas où la vue parent n'est pas connue par la vue enfant?Je comprends que vous pouvez obtenir une propriété foo d'un parentView avec this.getPath('parentView').get('foo') ou this.getPath('contentView').get('foo').Mais qu'en est-il d'une fonction (dans ce cas, itemclicked())?

Answer 1

this.get('parentView').itemClicked(this.get('item')); devrait faire l'affaire.

Answer 2

Vous pouvez utiliser l'assistant {{action}}, voir: http://jsfiddle.net/smvv5/

Modèle:

<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

Les versions récentes d'Ember utilisent le hachage actions au lieu de méthodes directement sur l'objet (bien que cette méthode obsolète soit toujours prise en charge, elle ne durera peut-être pas longtemps).Si vous voulez une référence à la vue transmise au gestionnaire, envoyez via "view" en tant que paramètre et utilisez le parentView comme cible.

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

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

L'assistant {{action}} n'envoie pas via l'objet événement.Vous ne savez toujours pas comment obtenir une référence à l'événement si vous en avez besoin.

source