Bindings Berechnete Eigenschaft in Ember TextField

Question

Ich versuche, mein Datenmodell an das Textfeld in Ember.js zu binden. Das Modell hat ein Feld, das einen Währungswert darstellt (z. B. 1000,50 US-Dollar). Der Benutzer kann diesen Wert dann ändern.

Ember empfängt die Daten als Zahl (1000.50) - nicht als Währung formatiert. Ich verbinde die Ansicht mit einer berechneten Eigenschaft, die das schöne Format hat. Hier ist meine Lenkervorlage.

{{input classNames="amount" valueBinding="p.amountFmt"}}</td> 

Mein Modell sieht so aus:

App.Product = Ember.Object.extend({ 
    amount : 0.00, 
    amountFmt: function() { 
    //example. Do actual formatting with this.get('amount'); 
    var formattedNum = '1,000.50'; 
    return formattedNum; 
    }.property('amount') 
}); 

Das Problem ist, wenn der Benutzer die Menge in das Eingabefeld ändert, die zugrunde liegende ‚Menge‘ Eigenschaft auf mein Modell nicht aktualisiert -I nehme an, weil Es ist an die berechnete Eigenschaft gebunden.

Was ist die richtige Methode, um die Eingaben des Benutzers zu übernehmen, zu analysieren und gegebenenfalls zu validieren und in der Eigenschaft 'amount' zu speichern? Sollte ich Bindungen/Beobachter zwischen den beiden Eigenschaften verwenden? Wie würde das funktionieren?

Letztendlich ist die 'Betrag'-Eigenschaft, was Server-Seite erhalten bleibt. Ich betrachte die berechnete Eigenschaft nur als Ort für die Formatierung der Benutzeroberfläche. Normalerweise würde ich für diese Art der Formatierung einen Handlebars-Helfer verwenden, aber Sie können die ValueBinding-Funktion des TextFields nicht mit den Ergebnissen eines Handlebars-Helfers kombinieren.

Vielen Dank im Voraus für Ihre Hilfe! Andrew

Answer 1

Die Funktion für die berechnete Eigenschaft amountFmt fungiert je nach Kontext als Getter und Setter. Es ist Unterschrift amountFmt(key, [value]). Der Wert ist optional und wird nur übergeben, wenn der Wert geändert werden soll.

amountFmt: function(key, value) { 
    if (value) { 
    // setter 
    } else { 
    // getter 
    } 
}.property('amount')