2013-05-11 20 views
14

Aktualizuję projekt osobisty, w którym użyłem wersji ember.js 0.9.x.Jak uzyskać oryginalne wydarzenie w akcji embera

Nowa wersja została wydana i mam problem związany z działaniem embera.

Mam następujący kod HTML:

<li><a href="#" id="startApp" {{action activateView target="view"}}> Home</a> <span class="divider">|</span></li> 

gdzie, kiedy klikam jej wywołać tę funkcję activateView:

activateView: function(event, context) { 
    console.log(event);    
} 

ale zdarzenie i kontekst są niezdefiniowane. Próbowałem tego .context i zwraca undefined.

Głównym pomysłem jest uzyskanie identyfikatora łącza po kliknięciu przez użytkownika.

wiem o trasach i kierownicy linku pomocnika, ale naprawdę trzeba, że ​​identyfikator dla innych rzeczy,

możesz mi pomóc?

Odpowiedz

7

Zdarzenie nie jest przekazywane za pomocą pomocnika czynności. Jeśli naprawdę chcesz obiekt zdarzenia, trzeba zdefiniować widok i użyć zdarzenia click:

App.MyLink = Em.View.extend({ 
    click: function(e) { 
    } 
}); 

, a następnie:

<li>{{view App.MyLink}}</li> 

ale wymagające dostępu do zdarzenia DOM to rzadki przypadek, ponieważ możesz przekazywać argumenty do {{action}}. W twoim przypadku:

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li> 

aw przypadku:

activateView: function(id) { 
    console.log(id);    
} 
+0

Dzięki za pomoc. To było godziny, aby spróbować rozwiązać ten problem, a na koniec rozwiązanie było bardzo proste. –

+0

Nie ma za co, cieszę się, że zadziałało! –

+5

Jest więcej zdarzeń niż tylko element DOM. Rozumiem, że lepiej jest nie uzyskiwać dostępu do wydarzenia w akcji lub skonfigurować własny niestandardowy moduł obsługi, jeśli naprawdę tego potrzebuję. Ale czy istnieją jakieś tylne drzwi, aby uzyskać dostęp do wydarzenia? Zasadniczo nikt nie odpowiedział na pytanie PO. –

2

trzeba przekazać identyfikator do swojej funkcji jak tak aby został on dostępny w widoku, można przejść wzdłuż co kiedykolwiek chcesz , ale w tym przykładzie należy zrobić

html

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li> 

wtedy masz dostęp do osobistego lub co kiedykolwiek przeszedł w, w widoku

js

... 
activateView: function(data){ 
    console.log(data); // should be the ID "startApp" 
} 
... 
+0

Dzięki za pomoc. To było godziny, aby spróbować rozwiązać ten problem, a na koniec rozwiązanie było bardzo proste. –

+0

serdecznie zapraszamy :) – intuitivepixel

11

W Ember 2 ...

wewnątrz działania zawsze mają dostęp do obiekt Javascript event, który ma element DOM np

actions: { 
    myAction() { 
     console.log(event.target) // prints the DOM node reference 
    } 
} 
+0

dziękuję za to – agent47

+4

Dla mnie to nie działa w Firefoksie. Otrzymuję komunikat o błędzie: "ReferenceError: zdarzenie nie jest zdefiniowane". przykład: https://jsfiddle.net/6fra6cL4/ –

+0

Czy jest to wzmiankowane w dokumentach Ember? Nie mogę tego znaleźć. –

0

Istnieją dwa sposoby odbierania event obiekt w trakcie działań

1.If używasz komponentu, można zdefiniować dowolną tej liście imprezy nazwy w komponencie i zaprojektowane do odbierania natywnego obiektu zdarzenia. np., {{my-button model=model}}

export default Ember.Component.extend({ 
click(event){ 
    //oncliking on this componen will trigger this function 
    return true; //to bubble this event up 
} 
}) 

2.Jeżeli używasz HTML tag jak przycisk następnie trzeba przypisać (zamknięcie) działania na rzecz obsługi zdarzeń inline.

{{#each item as |model|}} 
     <button onclick={{action 'toggle' model}}>{{model.title}}</button> 
{{/each}} 

W akcjach funkcja mieszania hash zawsze otrzyma obiekt zdarzenia przeglądarki rodzimej jako ostatni argument.

actions:{ 
toggle(model,event){ 

} 
} 

W poniższym formacie, akcja przełącznik nie otrzyma event obiekt,

  • <button {{action 'toggle'}}>{{model.title}}</button>
  • pomocnicy wejściowe takie jak {{input key-press="toggle" i {{text-area key-press="toggle"

Poradnik naprawdę dobrze w przewodniku ember https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

Powiązane problemy