2017-02-20 4 views
1

Ich benutze Ember js der Version 2.10 Und ich versuche, Daten von Komponente zu Route zu senden.Wie sendet man Daten von der Komponente zur Route ember?

Hier ist meine Komponentenvorlage

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

Jetzt mit folgendem Code Import Ember aus Komponente js Dateidaten auf dem Weg zu senden von ‚glut‘ Ich versuche;

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

und zu versuchen, auf Route js Datei

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

Aber leider mit folgendem Code nicht immer alles zu bekommen.

Vielen Dank im Voraus.

+0

Verwenden Sie Schließungsaktionen und [ember-route-action-helper] (https://github.com/DockYard/ember-route-action-helper) Addon. – ykaragol

Antwort

2

Sie können die Aktion an den Routen-Controller senden, der dann auf die Route sprudelt, wenn der Controller die Aktion nicht definiert.

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

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

In Ihrer Vorlagendatei sind

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

Die Ember Art, die Dinge Daten nach unten, Aktion auf. Um die Daten zurück an den Controller/Router passieren, müssen Sie sie die obere Aktion machen rufen (vom Controller/Router)

Innerhalb Ihrer Komponente JavaScript-Datei,

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

componentActionName ist, was Sie brauchen zu setzen innerhalb Ihrer Vorlagendatei, die die in der JS-Datei der Komponente definierte Funktion auslöst.

Innerhalb Ihrer Komponente HBS-Datei,

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

{{action "componentActionName" param}}, ist, wie Sie die Parameter wieder auf Komponente passieren können, und dann Controller/route.

Eine weitere Sache

Eine Komponente isoliert werden sollte, die eine einfache Komponente bedeutet, sollte nicht bewusst die Umgebung. Es nur kennt die Daten übergeben und kann nur Datenmanipulation durchführen, indem Sie die Aktion und Parameter an den richtigen Ort (die Route) übergeben.

Verwandte Themen