Ember无法将路由操作传递给组件 [英] Ember unable to pass route action to component

问题描述

显然，我可以调用这个组件，因为我的工作是刷新部分模型。路由操作从一个按钮，但我无法通过相同的操作到组件。

路由器

 导出默认值Ember.Route.extend（{
 actions：{
 doSomething：function ）{
 alert（'Router handling！'）; 
} 
} 
}）; 
  

页面模板

 < button {{actiondoSomething}}>说< / button> 
 {{myComponent onGetUsers =（actiondoSomething）}} 
  

组件

 导出默认值Ember.Component.extend（{
操作：{
 onPageClicked：function（pageNo）{
 this.sendAction（'onGetUsers'，pageNo）; 
} 
} 
}）; 
  

按钮点击工程。当我使用组件我做它的动作，但sendAction不工作或触发。

有没有规则，我无法将操作传递给下线组件？或者我在代码中做错了？

解决方案

sendActions 可用于组件到组件通信。

发送 - 可用于控制器路由通信。
您不能使用任何一种方式。

对于组件路由通信，您可以使用以下插件。

  ember install ember-route-action-helper 
  

通过在路由中定义动作，您可以从template.hbs调用它。

 < button {{action（route-action' appRouteAction'fromApplication.hbs'）}}>按钮< / button> 
  

，您可以从my-component.hbs调用

$ pre> < button {{action（route-action'appRouteAction''from MyComponent.hbs'）}}> My-Component按钮< / button>


如果要首先调用组件操作，然后在路由中执行操作，

在template.hbs中，将包含路由动作的组件作为关闭动作，

  {my-component2 appRouteAction =（route-action'appRouteAction'）}} 
  

在my-compoent2中。 hbs，

 < button {{action'appRouteAction''CallFromComponentActions-my-compoent2.hbs'}}> CallFromComponentActions< /按钮> 
  

在我的compoent2.js

 从ember导入Ember; 
 export default Ember.Component.extend（{
 actions：{
 appRouteAction（fromWhere）{
 console.log（'appRouteAction in my-component'）; 
 this.get（'appRouteAction'）（... arguments）; 
} 
} 
}）; 
  

示例Twiddle - 播放ember-route-action-helper-addon。

I have a component that need to receive an action that I placed on the route since its job is to refresh part of the model.

Apparently I can call the route action from a button but I am not able to pass the same action down to the component.

The router

export default Ember.Route.extend({
    actions: {
        doSomething: function(){
            alert('Router handled!');
        }
    }
});

The page template

<button {{action "doSomething"}}>speak</button>
{{myComponent onGetUsers=(action "doSomething")}}

The component

export default Ember.Component.extend({
    actions: {
        onPageClicked: function(pageNo){
            this.sendAction('onGetUsers', pageNo);
        }
    }
});

The button click works. When I use the component I make it to its action but the sendAction never work or fires.

Is there a rule that I cannot pass actions to down line components? or am I doing something wrong in the code?

解决方案

sendActions - can be used for component to Component communication.
send - can be used for controller to route communication. You can't use either way.

For Component to route communication, you can use below addon.

ember install ember-route-action-helper

By defining action in route, you can call it from template.hbs

<button {{action (route-action 'appRouteAction' 'fromApplication.hbs') }}>button</button>

and You can call from my-component.hbs

<button {{action (route-action 'appRouteAction' 'from MyComponent.hbs') }}>My-Component button</button>

and If you would like to call Component action first and then action in route,

In template.hbs - include Component with route-action as closure action,

{{my-component2 appRouteAction=(route-action 'appRouteAction')}}

In my-compoent2.hbs,

<button {{action 'appRouteAction' 'CallFromComponentActions-my-compoent2.hbs' }}>CallFromComponentActions</button>

In my-compoent2.js

import Ember from 'ember';
export default Ember.Component.extend({
  actions:{
    appRouteAction(fromWhere){
      console.log('appRouteAction in my-component ');
      this.get('appRouteAction')(...arguments);
    }
  }
});

Sample Twiddle- to play around ember-route-action-helper-addon.

这篇关于Ember无法将路由操作传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！