如何从组件发送数据到路由余烬？

Question

我正在使用版本2.10的ember js，并且尝试将数据从组件发送到路由。

这是我的组件模板

<div class="pull-right search-section">
    <form class="form-inline search-box" {{action save on="submit"}}>
      <button type="submit" class="btn"><i class="glyphicon glyphicon-search"></i></button>
      <div class="form-group">
        {{input value=search class="form-control" placeholder="Search anything"}}
      </div>
    </form>
    <a href="#" class="link-advance-search">Advance Search</a>
</div>

现在我正在尝试使用以下代码从'ember'中导入Ember来发送数据以从组件js文件进行路由；

export default Ember.Component.extend({
  save: function () {
        var search = this.get('search');
        console.log(this.sendAction('saveAction',search));
  }
});

并尝试使用以下代码获取路线js文件

import Ember from 'ember';
export default Ember.Route.extend({  
    actions: {
        saveAction: function(search_string){
            alert('fhdishf');
        }
    }
});

但不幸的是没有得到任何东西。

提前致谢。

Answer 1

您可以将操作发送到路由控制器，如果控制器未定义操作，则气泡会冒泡到路由。

// Component in Template
{{task-item content=task tasksController=this}}

// Component Action
actions: {
    copyTask: function(){
        this.get('tasksController').send('your-action');
    }
}

Answer 2

在模板文件中，

{{task-item
  data=model
  innerActionName=outterActionName
}}

事情的余烬是数据减少，行动增加 。 要将数据传递回控制器/路由器，您必须使其调用上级操作（来自控制器/路由器）

在您的组件JavaScript文件中，

actions: {
  componentActionName(param) {
    this.sendAction("innerActionName", param);
  }
}

componentActionName是您需要放入模板文件中的模板，该模板文件会触发在组件JS文件中定义的功能。

在您的组件HBS文件中，

<div {{action "componentActionName" param}}>{{param}}</div>

{{action "componentActionName" param}} ，是如何将参数传递回component，然后传递给控制器​​/路由的方法。

还有一件事

一个组件应该被隔离，这意味着一个简单的组件不应该知道周围的环境。 它仅知道传递给它的数据，并且只能通过将操作和参数传递到正确的位置（路线）来执行数据操作。