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

Question

I am using ember js of version 2.10 And i am trying to send data from component to route.

Here is my component template

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

Now I am trying to send data to route from component js file with following code import Ember from 'ember';

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

And trying to get at route js file with following code

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

But unfortunately did not getting anything.

Thanks in advance.

Answer 1

You can send the action to the routes controller which then bubbles to the route if the controller does not define the action.

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

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

Answer 2

Inside your template file,

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

The ember way of doing things is Data down, Action up . To pass the data back to the controller/router, you have to make it call the upper action (from controller/router)

Inside your component JavaScript file,

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

componentActionName is what you need to put inside your template file which triggers the function defined inside component JS file.

Inside your component HBS file,

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

{{action "componentActionName" param}} , is how you can pass the parameter back to component, and then controller/route.

One more thing

A component should be isolated, which means a simple component should not aware the surrounding environment. It only knows the data passed into it and can only perform data manipulation by passing the action and paramter to the right place (the route).