2015-06-30 17 views
19

Oto trasa:Wysyłanie działań z komponentu do trasy w ember.js

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    actions: { 
     closeModal: function() { 
      alert('asdf'); 
     } 
    } 
}); 

i składnik js kod:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    actions: { 
     closeModal: function() { 
      this.sendAction('closeModal'); 
     } 
    } 
}); 

Co chciałbym zrobić, to (jak kod może zasugerować;)) wysłać akcję z komponentu do trasy, tak aby trasa mogła na nim działać. Jednak powyższy kod nie działa - komponent poprawnie obsługuje akcję, ale wywołanie metody sendAction nie działa.

EDIT:

I rozwiązać ten problem przy użyciu:

this._controller.send('closeModal'); wewnątrz metody działania komponentu jednak to rozwiązanie mnie nie zadowoli. Autorzy Ember mówią, że kontrolery zostaną usunięte w ember 2.0, więc w moim kodzie nie chcę mieć żadnych odniesień do nich. Propozycje?

+0

Może pokażesz nam szablonu, w którym używasz komponentu? – GJK

Odpowiedz

30

Komponent ma kontekst izolowany. Więc nic nie wie o niczym (trasie lub kontrolerze) poza komponentem. W celu wysłania skargi od komponentu do trasy, należy przekazać działania trasie do komponentu w szablonie tak:

// your template 
{{your-component closeModal="closeModal"}} 

Teraz kiedy zadzwonić this.sendAction('closeModal') w składniku, będzie to powodować działania danego do komponentu w szablonie, który w tym przypadku jest działaniem Twojej trasy w postaci closeModal.

Aby uzyskać więcej informacji, zobacz docs (http://emberjs.com/api/classes/Ember.Component.html#method_sendAction)

AKTUALIZACJA 03 sierpnia 2016

Dla tych, którzy napotkał czynności zamknięcia w nowszych wersjach Ember, można również skorzystać z takich działań tutaj robi:

// your template 
{{your-component closeModal=(action "closeModal")}} 

Ta akcja pomocnika będzie wskazywać na działanie kontrolera, w składniku można nazwać this.attrs.closeModal() lub this.get('closeModal')(), aby uruchomić akcję zamiast wywoływać sendAction.

Zaletą tych działań jest to, że działanie może zwrócić wartość, która może być użyta w komponencie. W przypadku modala można go na przykład użyć do określenia, czy modal może zostać zamknięty, czy nie, jeśli wywoływana jest nazwa closeAction, jeśli zwróci ona na przykład false, można zdecydować o zapobieganiu zamykania modalu.

Na marginesie, działania zamykające zawsze wskazują na kontrolerze, aby pozwolić to wskazywać na działania trasy, można spojrzeć na ten dodatek: https://github.com/DockYard/ember-route-action-helper

+0

Czy istnieje "ładniejszy" sposób na to, wysyłając wszystkie akcje lub po prostu definiując atrybut np {{Twój komponent closeModal}}? dzięki – rssfrncs

+2

@rssfrncs Jedyne, co mogę wymyślić to dodanie właściwości 'closeModal: 'closeModal'' do twojego komponentu, w ten sposób domyślnie wywoła akcję' closeModal ', gdy wywoływana jest' sendAction (' closeModal '). Nie musisz więc już przekazywać akcji podczas definiowania komponentu w szablonie. – jcbvm

+5

"[Komponent] nic nie wie o niczym (trasie lub kontrolerze) poza [samym sobą]" - jest to naprawdę ważna koncepcja, której nie udało mi się zrozumieć przed przeczytaniem tej odpowiedzi. –

Powiązane problemy