Question

我有一个组件需要接收我放在路线上的动作，因为它的工作是刷新部分模型。

显然我可以通过按钮调用路线动作但是我无法将相同的动作传递给组件。

路由器

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

页面模板

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

组件

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

点击按钮有效。当我使用组件时，我将其作为动作，但sendAction永远不会工作或触发。

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

Answer 1

sendActions - 可用于组件到组件的通信 send - 可用于控制器路由通信。你不能用任何一种方式。

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

ember install ember-route-action-helper

通过在路线中定义行动，您可以从template.hbs

调用它

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

你可以从my-component.hbs打电话

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

并且如果您想首先调用Component action，然后在路径中执行操作，

在template.hbs中 - 将包含route-action的Component作为闭包动作，

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

在my-compoent2.hbs中，

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

在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 - 玩ember-route-action-helper-addon。

Answer 2

sendAction是一个古老的概念。它仍然可以正常使用，但它基本上被关闭动作所取代，而这似乎是你所知道的。

它目前对路径操作不起作用的原因是因为尝试为未知目标创建闭包。在将模板插入DOM时，关闭操作会尝试识别确切的函数并在调用时将其作为目标。这样做是为了简化，以便操作可以返回一个值。当该操作在控制器或父组件上时，它非常简单。当该行动在路线上时，它并不那么容易，因为它必须走在路线链上以找到实施该行动的最近路线。此外，由于路由操作可以返回false以允许操作进一步冒泡，因此完全支持将非常棘手。

有一个ember-cli插件可以帮助弥补这个差距。结帐：https://github.com/DockYard/ember-route-action-helper。这是一个JSBin显示它的实际应用：http://jsbin.com/luruyegice/edit?html,js,output

Ember无法将路径操作传递给组件

2 个答案: