Question

考虑一个定义对象列表的视图：

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

  itemClicked: function(item){

  }
)};

使用模板：

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

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

所以基本上我的问题是如何将事件传递给父视图，尤其是在子视图不知道父视图的情况下？我了解您可以使用foo或this.getPath('parentView').get('foo')获取parentView的属性this.getPath('contentView').get('foo')。但是一个函数呢（在这种情况下，itemclicked()）？

Answer 1

this.get('parentView').itemClicked(this.get('item'));应该可以解决问题。

Answer 2

您可以使用{{action}}助手，请参阅：http://jsfiddle.net/smvv5/

模板：

<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

Ember的最新版本直接在对象上使用actions哈希而不是方法（尽管仍然支持这种不推荐使用的方法，但可能不会持续很长时间）。如果您想要引用传递给处理程序的视图，请通过＆＃34; view＆＃34;作为参数并使用parentView作为目标。

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

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

{{action}}助手不通过事件对象发送。如果需要，仍然不确定如何引用该事件。

source

如何将事件传递给父视图，传递触发事件的子视图？

3 个答案: