如何将一个动作从 Ember 组件发送到一个包含它的视图? [英] How to send an action from a Ember component to a View that wraps it?

问题描述

我知道 sendAction 会将动作从组件发送到与放置它的模板关联的控制器，但在我的情况下，该组件没有直接放置在路由模板中.相反，我的组件位于视图模板中:

这个组件有一个与之关联的控制器:

App.ComponentAController = Ember.Controller.extend({...}

但是包装视图没有，它只是一个视图:

App.DisplayView = Ember.View.extend({模板名称:'显示模板'，动作:{更新数据:函数(数据){/* 当嵌入式组件A中发生动作时，如何触发它?我想在此处处理数据对象，以便我可以相应地更新包装视图.*/}}...}

如果我在组件的控制器中实现操作，当我从组件内执行 sendAction('updateData', data) 时不会触发它.如果我在 DisplayView 中实现它，它也不会被触发.

所以问题是:当在componentA中触发一个动作时，如何将该动作发送到视图DisplayView进行处理?

更具体地说，我正在尝试将上下文数据发送到该视图，以便可以根据在嵌入式组件上选择的内容进行更新.因此，如果有另一种方式来传达这些数据也行得通.我选择行动只是因为它看起来合适，但也许并不合适.

更新:实际场景

实际代码引用了一个网格视图，它的模板中有一个分页组件.当用户切换到新页面时，分页组件会向服务器发送请求以获取所选页面.

返回数据后，它需要让包装视图(包含网格)知道新数据可用.当用户单击页码时，操作在分页组件中处理，这就是我从那里进行数据调用的原因.如果我需要对其他内容进行分页，我想重用这个组件，所以我不想让分页成为网格视图的一部分.

解决方案

通常你通过target，但是一个组件的上下文属性名是targetObject.

<代码>{{foo-bar action='actionName' targetObject=view}}

I know the sendAction will send actions from a component to the controller associated with the template where it has been placed, but in my case the component is not placed directly inside a route's template. Instead, my component is inside a view's template:

<script type="text/x-handlebars" data-template-name="displayTemplate">
    <h3>View</h3>

    ...

    {{componentA}}

</script>

This component has a controller associated with it:

App.ComponentAController = Ember.Controller.extend({
    ...
}

But the wrapping view does not, it's just a view:

App.DisplayView = Ember.View.extend({
    templateName: 'displayTemplate',

    actions: {
         updateData: function(data) {
             /* how can I get this triggered when an action happens in the embedded componentA? I'd like to 
             process the data object here so I can update the wrapping view accordingly. */
         }
    }
...
}

If I implement the action in the component's controller, it is not triggered when I perform a sendAction('updateData', data) from within the component. If I implement that in DisplayView, it is not triggered either.

So the question is: when an action is triggered in componentA, how can I send that action to the view DisplayView for handling?

More specifically, I'm trying to send context data to that view so it can be updated depending on what is selected on the embedded component. So if there is another way of communicating this data that'd work too. I chose actions just because it seemed appropriate, but maybe it is not.

UPDATE: The actual scenario

The actual code refers to a grid view, which in it's template has a pagination component. When the user switches to a new page, the pagination component sends a request to the server for the selected page.

Once data is returned, it then needs to let the wrapping view (which contains the grid) know that new data is available. When the user clicks on the page number, the action is handled in the pagination component and that's why I make the data call from there. If I needed to paginate something else, I wanted to reuse this component so I didn't want to make the pagination part of the grid view.

解决方案

Normally you pass target, but the context of a component the property name is targetObject.

{{foo-bar action='actionName' targetObject=view}}

这篇关于如何将一个动作从 Ember 组件发送到一个包含它的视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！