Ich habe eine Reihe von Schaltflächen, deren Status ich mit einer Klasse active umschalten möchte. Wenn ich eine einzelne Schaltfläche hätte, würde ich die Klasse active an eine Controller-Eigenschaft binden und diese Eigenschaft im Click-Handler umschalten:
Aber ich habe mehrere Knöpfe, also bin ich mir nicht sicher, was ich binden kann. Es wäre nützlich, wenn ich einen Verweis auf die angeklickte Schaltfläche an den Action-Handler übergeben könnte, aber ich bin nicht sicher, wie das geht.
%Vor%Was ist der beste Weg, dies zu erreichen?
Ist das Model-Item nicht das, was du weitergeben willst und nicht der Button?
Dann können Sie mit Ihrem Toggle einfach ein Attribut für das Objekt festlegen, an das Sie binden Schaltflächenklasse .
%Vor%Obwohl das Poster die Antwort hatte, die er wollte, dachte ich, ich würde eine Antwort auf das schreiben, was ich für die ursprüngliche Frage hielt:
Wie bekomme ich eine Referenz auf das angeklickte DOM-Element von einer Aktion? seit ich hierher gekommen bin, um nach einer Antwort auf diese Frage zu suchen, und sie nicht gefunden habe.
Ich finde keine Möglichkeit, das tatsächliche Element zu erhalten, aber Sie können das root-Ansichtselement (das die in der Vorlage definierten Elemente umschließt) über this :
Vorlage:
<button {{action 'toggle' this}}>model.title</button>
Controller, Ansicht, Komponente:
%Vor%Nur eine andere Antwort ...
Wenn Sie die Aktion in den onclick (oder ein anderes dom-Ereignis) setzen, erhalten Sie das javascript-Objekt "event" im letzten Parameter (damit Sie event.target zum Abrufen und Bearbeiten des Objekts verwenden können)
Vorlage:
%Vor%Route oder Controller:
%Vor%Ich hoffe, es hilft
Sie können active -Eigenschaft in items
wenn active=true dann active klasse auf die Schaltfläche angewendet wird.
Um den Fragetitel Pass a reference of the clicked DOM element to the action handler in Ember zu beantworten.
1.Wenn Sie eine Komponente verwenden, können Sie eine beliebige Liste von Ereignisnamen definieren in der Komponente und das ist entworfen, um natives event -Objekt zu erhalten.
z.B.,
{{my-button model=model}}
2.Wenn Sie html-Tags wie button verwenden, müssen Sie einem Inline-Event-Handler eine (Closure-) Aktion zuweisen.
In Aktionen erhält hash toggle function immer das native Browser event object als letztes Argument.
In diesem <button {{action 'toggle' model}}>{{model.title}}</button> -Format erhält die Aktion toggle nicht event object,
Sehr gut erklärt in Ссылка