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

问题描述

我知道 sendAction 会将一个组件的操作发送到与放置的模板相关联的控制器，但在我的情况下，组件不会直接放置在路线的模板。相反，我的组件在视图的模板中：

 < script type =text / x-handlebarsdata-template- NAME = displayTemplate > 
< h3>查看< / h3> 
 
 ... 
 
 {{componentA}} 
 
< / script> 
  

此组件具有与之关联的控制器：

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

但是包装视图不是，只是一个视图：

  App.DisplayView = Ember.View.extend（{
 templateName：'displayTemplate'，
 
 actions：{
 updateData：function（data）{
 / * how在嵌入式组件A中发生动作时，可以触发此事情吗？我想要
处理这里的数据对象，以便相应地更新包装视图* / 
} 
} 
 ... 
} 
  

如果我在组件的控制器中实现操作，当我从组件中执行 sendAction（'updateData'，data）时，不会触发。如果我​​在 DisplayView ，它不会被触发。

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

更具体地说，我正在尝试将上下文数据发送到该视图，以便可以根据嵌入式组件上选择的内容进行更新。所以如果有另一种方式来传达这个数据，那也是有用的。

更新：实际情况

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

一旦返回数据，就需要使包装视图（包含网格）知道新数据可用。当用户点击页面号码时，该操作将在分页组件中处理，这就是为什么我从那里进行数据调用。如果我需要分页别的东西，我想重用这个组件，所以我不想让页面视图的分页。

解决方案

通常你通过 target ，但属性名称为 targetObject 的组件的上下文。 p>


{{foo-bar action ='actionName'targetObject = view}}
/ p>

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屋！