EmberJS TextField on-the-fly validieren?

8

Ich muss ein Formulardruckfeld validieren, das mit EmberJS an eine Eigenschaft eines Modells gebunden ist. Ich möchte, dass der Benutzer nur gültige, positive Zahlen eingeben kann.

Ich kenne jQuery.isNumber (), aber ich weiß nicht, wie ich es mit dem Feld verbinden soll. Ich habe versucht, explizite Getter / Setter-Funktionen auf der Eigenschaft des Modells mit Ember.computed (...) zu schreiben, aber es hat nicht funktioniert.

Gibt es etwas, das dem Ereignis WinForms onChanging () ähnlich ist, mit dem ich mich verbinden kann?

    
Cristi Diaconescu 19.05.2012, 13:04
quelle

4 Antworten

14

Es gibt eine Reihe von Möglichkeiten, um so etwas zu tun. Hier können wir das mit Bindings und Beobachtern erreichen.

Zuerst erstellen wir eine Funktion, die immer eine Zahl zurückgibt.

%Vor%

Damit können wir Folgendes tun

%Vor%

1) Wir erstellen eine Bindung an das Alter der Person, aber alles, was diese Bindung passiert, kann nur eine Zahl sein. Weitere Informationen finden Sie unter Ember.Binding zu / von transforms.

2) Wir beobachten den Wert des Textfelds und stellen es nur auf eine Zahl ein, wenn es sich ändert. Wenn der Benutzer '42a' eingibt, wird er sofort auf '42' zurückgesetzt. Beachten Sie, dass, obwohl '42a' für eine kurze Sekunde in der Texteingabe war, es aufgrund unserer Transformation nicht in der Lage gewesen wäre, die Bindung zu passieren.

Hier ist eine Geige, die dieses Beispiel zeigt: Ссылка

    
Ryan 22.05.2012, 04:39
quelle
3

Sie könnten einen keyDown -Ereignishandler zu Ihrem TextField hinzufügen, siehe Ссылка :

%Vor%     
pangratz 21.05.2012 13:11
quelle
1

Code (behandelt nur numerische Eingaben und erlaubt das Binden von Zahlen anstelle von Zeichenketten, falls gewünscht):

%Vor%

Vorlage:

%Vor%     
neverfox 22.06.2014 09:34
quelle
0

Dies ist eine aktualisierte Antwort (von @neverfox) für die neueste Ember-Version (Ember-cli 2.0). Es ist in coffeescript geschrieben und ein bisschen verändert, um dem Beispiel von beeFocus zu entsprechen ( Ссылка )

  1. Generiere die Komponente:

    ember g Komponentennummer-Feld

  2. Ändern Sie den Blueprint-Code (app / components / number-field.coffee) in

%Vor%
    
Hugo Logmans 27.03.2015 08:11
quelle