如何從組件發送數據到路由余燼？

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，然后傳遞給控制器​​/路由的方法。

還有一件事

一個組件應該被隔離，這意味着一個簡單的組件不應該知道周圍的環境。 它僅知道傳遞給它的數據，並且只能通過將操作和參數傳遞到正確的位置（路線）來執行數據操作。