Ember.js: Eingabeaktion on = "change" wird nicht ausgelöst

seltsam:

Umgehung: http://emberjs.jsbin.com/yedigeyeda/1/edit?html , js, Konsole, Ausgabe

Dies ähnelt # 10305

Dies ist wirklich ärgerlich bei Abnahmetests, bei denen der fillIn -Helfer kein "Keyup" -Ereignis auslöst. Ich muss also Folgendes tun:

fillIn('#my-input', 'some-val');
find('#my-input').trigger('keyup');

wenn ich möchte, dass Ereignisse ordnungsgemäß ausgelöst werden (da ich das Änderungsereignis nicht verwenden kann, das wahrscheinlich durch fillIn ausgelöst wird).

@Fryie - Das hat nichts mit dem hier gemeldeten Problem zu https://github.com/emberjs/ember.js/pull/11016 .

Entschuldigung, ich wollte nur darauf hinweisen, dass 'Keyup' keine praktikable Problemumgehung ist, also in gewissem Sinne ist es verwandt. :) :)

@stefanpenner : @JKGisMe und ich haben kürzlich festgestellt, dass die Verwendung des {{input}} keine Aktionen für bestimmte Ereignisse auslöst. Hier ist ein detaillierteres Beispiel: http://ember-twiddle.com/0830f4ed9f15df59801e

(Twiddle von @JKGisMe)

Tatsächlich funktionieren viele Ereignisse im Eingabehelfer derzeit nicht, einschließlich aller mausbezogenen Ereignisse.

Ja, ich verfolge das. Ich werde versuchen, anzugeben, was passiert, wenn ich nicht mobil bin.

Dies ist ein ernstes Problem. Das Festlegen von zwei und mehr Aktionen kann nicht für Eingabehelfer erfolgen. Ich kann nicht glauben, dass Ember 2.0.0 immer noch keine Attribute wie on-input = "" und on-change = "" hat.
Hoffe das wird so schnell wie möglich behoben ...

Ich habe _all_ die Aktionen nicht getestet, aber ich habe dies nur erfolgreich verwendet:

{{input 
    value=value 
    autoresize=true 
    focus-in="inputFocusIn" 
    focus-out="inputFocusOut" 
    enter="removeFocus" 
}}

Sie können auch einfach die altmodische HTML-Version und die hbs-Aktionen verwenden, um dies zu erreichen.

<input 
    value={{someValue}} 
    onblur={{action checkForValid value="target.value"}}
    oninput={{action validate value="target.value"}}
/>

Im Moment unterstützt es diese:

insert-newline
insert-newline
escape-press  
focus-in      
focus-out     
key-press     
key-up        
key-down

http://emberjs.com/api/classes/Ember.TextSupport.html

Ja, ich dachte, dass dieses Problem eine Regression mit {{input action="foo" on="focus-in"}} meldet (die auf {{input focus-in="foo"}} ), aber ich habe mich geirrt (das funktioniert ordnungsgemäß mit einem der oben aufgeführten Ereignisse).

Hier geht es speziell um die Verwendung von on="change" , aber ich bin nicht sicher, ob dies etwas ist, das wir im Moment unterstützen wollen.

ok also ja, ich muss der Aktion bei Änderung für die HTML-Eingabeversion ein (mut model.value) hinzufügen.

Was mich zu der Frage führt ... was bringt es, ein {{input wenn Sie es nicht wirklich verwenden können? Es fühlt sich so an, als ob <input fehlerhaft ist, weil Sie nicht einfach eine 2-Wege-Bindung mit hbs durchführen können, aber gleichzeitig ist {{input aufgrund seiner Einschränkungen bei der Ereignisbehandlung etwas unbrauchbar. Wären wir nicht besser dran, wenn wir die {{input überhaupt nicht hätten, um die Dinge nicht zu verwirren?

@JKGisMe - Huh? Wie ist {{input}} fehlerhaft? Es funktioniert und wird von einer großen Mehrheit der Ember-Anwendungen ohne Zwischenfälle verwendet.

Also in dem oben verlinkten Twiddle ... Wie würden Sie all diese mit dem {{input ?

In meinem Arbeitsprojekt habe ich versehentlich die HTML-Methode für alle Eingabefelder verwendet, bevor dies angezeigt wurde, aber jetzt frage ich mich, ob es bc war, dass ich eine Menge Aktionen an Ereignisse angehängt habe, die einfach so funktionierten ... : Schade, dass sich der Entwickler nicht wirklich erinnert.

@rwjblue Meine Erwartung bei der Verwendung des {{input}} -Helfers war, dass es sich um einen syntaktischen Zucker zum Erstellen einer HTML-Eingabe handelt, während eine bidirektionale Bindung für Wert- und Bindungsereignisse durchgeführt wird. {{input}} ist keine Eins-zu-Eins-Bindung für Ereignisse, da Sie click oder change , um direkt an Aktionen zu binden. Sie müssen eines der dokumentierten Ereignisse verwenden.

Das Lesen der Anleitung dazu ist höchst irreführend, da nicht erwähnt wird, was Sie nicht für eine Eingabe verwenden können.

http://guides.emberjs.com/v2.0.0/templates/input-helpers/

Insbesondere im Abschnitt "Aktionen" erhalten Sie einen Link zu allen Ereignissen und können diese nur dasherisieren. Erst wenn Sie sich vertiefen und endlich diese Seite erreichen:

http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_input

Beginnend mit dieser Anweisung: "Der Helfer erlaubt einigen Benutzerereignissen, Aktionen zu senden."

Dass du merkst, dass du nicht verrückt wirst und click nicht funktionieren wird.

Ich sage nicht, dass das falsch ist; einfach unerwartet. Dies veranlasste mich, in Slack zu springen und zu fragen, warum. Ich wurde mit ebenso verwirrten Menschen begrüßt wie ich.

Ich frage mich, ob es dazu bereits ein Update gibt

Ich bin neu bei Ember und habe die letzte Stunde damit verbracht, diesen aufzuspüren. Unsicher, ob dies daran liegt, dass ich kürzlich von Angular konvertiert wurde und es gewohnt bin, ng-change für mich verfügbar zu haben.

Im Moment bin ich mir immer noch nicht sicher, was Aktionen sind oder was sie für mich bedeuten, also wusste ich nicht einmal, wonach ich suchen sollte.

Unabhängig davon verehre ich diesen Rahmen. Von Angular kommend fühlt sich hier alles gut durchdacht und weitaus konsistenter an.

Bearbeiten: Für diesen Beitrag sind keine Aktionen erforderlich. Ich habe nur Feedback gegeben.

@rwjblue @morganick Ich wurde auch von diesem _miss-Verständnis_ gebissen. Ist das Folgende eine korrekte, wenn auch vereinfachte Richtlinie, wann welches Formular für eine Eingabe in eine Komponente verwendet werden soll?

| Anwendungsfall | {{input}} vs <input> |
| --- | --- |
| Werte an den Eingängen beachten | {{input}} oder <input> |
| Kontrollkästchen mit Aktionen | <input {{action="actionName" on="change"}} (um das Click-Ereignis hält das _checked_ Eigenschaft des Kontrollkästchen aktualisieren; Beachten Sie, dass der Beobachter auf _checked_ nicht Feuer und dass die _checked_ Eigenschaft Checkbox kann nicht zugegriffen werden (*); Beachten Sie, dass die Bindung click unterbricht auf diese Weise das typische Umschaltverhalten des Kontrollkästchens (!)); |
| Andere Eingabetypen | {{input}} wenn das Ereignis von Ember.TextSupport unterstützt wird, andernfalls <input> |

Ich denke auch, dass wir den Abschnitt Aktionen und Kontrollkästchen hier ändern sollten.

* ... IMO Die einzige Möglichkeit, einen Aktionshandler zu registrieren und zuverlässig auf den _checked_-Wert des Kontrollkästchens zuzugreifen, besteht darin, das Formular onClick={{action "actionName"}} und ev.target.checked im Aktionshandler zu überprüfen. Mir ist auch aufgefallen, dass sich onClick={{action "actionName"}} und {{action "actionName" on='click'}} unterschiedlich verhalten: Der erste übergibt den Event-Listener, während der zweite dies nicht tut. Ist das beabsichtigt?

Ich hatte Probleme damit und musste eine Schaltfläche zum Speichern ändern, wenn sich die Werte der Eingaben änderten. Ich habe festgestellt, dass, wenn Sie Ihre Eingaben in einem Formular festlegen und die Aktion "Ändern" im Formular selbst festlegen, die Aktion jedes Mal ausgeführt wird, wenn eine der Eingaben im Formular geändert wird.

Twiddle hier: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C

Siehe Ereignisnamen hier: http://emberjs.com/api/classes/Ember.View.html#toc_event -names

Wenn dies nicht das Problem ist, das Sie haben, ignorieren Sie dies einfach 😄.

@ jfuqua390 Dein Twiddle-Link
""
Twiddle hier: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C
""
funktioniert nicht, kannst du aktualisieren?

Übrigens, ich gebe nur meine Lösung an jeden, der hierher kommt.

    <input
      multiple="true"
      onchange={{action "upload"}}
      accept="image/png,image/jpeg,application/pdf"
      type="file"
    />

    actions: {
      upload: function(event) {
        console.log('upload');
      }
    }

@ldong Ich habe deine Arbeit ausprobiert (zugegebenermaßen auf einer alten Version von Ember) und den folgenden Fehler erhalten:

Uncaught ReferenceError: Invalid left-hand side in assignment

Nicht sicher, ob mir etwas fehlt?

Für jeden, der immer noch damit zu kämpfen hat, scheint dies gut zu funktionieren:

{{input value=value input=(action "valChange")}}

Aus Stackoverflow kopiert

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @ jfuqua390 @ldong @locks Ist dies immer noch ein Problem? Vielleicht sollten wir das schließen oder eine neue Reproduktion erstellen. Was denkst du?

Im Moment gibt es viele Möglichkeiten, ein funktionierendes Änderungsereignis zu erstellen

@jcfinnerup Ideen, wie man das