2017-02-20 5 views
1

Я использую ember js версии 2.10 И я пытаюсь отправить данные из компонента в маршрут.как отправить данные из компонента в маршрут ember?

Вот мой шаблон компонента

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

Теперь я пытаюсь отправить данные на маршрут из компонента JS файла с следующим кодом импорта Ember из «уголька»;

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

И пытаюсь получить на маршрут файл с расслоением плотного следующим кода

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

Но, к сожалению, ничего не получает.

Заранее спасибо.

+0

Используйте действия закрытия и [ember-route-action-helper] (https://github.com/DockYard/ember-route-action-helper) addon. – ykaragol

ответ

2

Вы можете отправить действие контроллеру маршрутов, который затем пузырится на маршрут, если контроллер не определяет действие.

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

// Component Action 
actions: { 
    copyTask: function(){ 
     this.get('tasksController').send('your-action'); 
    } 
} 
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}}, как вы можете передать параметр обратно к компоненту, а затем контроллер/маршрут.

Еще одна вещь

компонент должен быть изолирован, что означает простой компонент не знают должны окружающей среды. Он только знает данные, переданные в него, и может выполнять манипуляции с данными, передавая действие и параметр в нужное место (маршрут).