Arbeiten mit Zahlen in Formularen

Question

Ich baue eine App mit Aurelia und wirklich gefallen das Framework so weit, aber ich bin auf ein Problem gestoßen, wo ich versuche, eine Liste von Kontrollkästchen, deren Werte sind Zahlen (ID: s in der Realität) und Aurelia scheint sie in Strings umzuwandeln und so schlägt der Vergleich fehl.

Ich habe im Grunde so etwas wie:

export class MyVm { 
    constructor() { 
     this.items = [ 
      {name: 'Foo', id: 0}, 
      {name: 'Bar', id: 1}, 
      {name: 'Baz', id: 2} 
     ]; 
     this.selectedItems = [0, 2]; 
    } 
} 

Und meiner Meinung nach:

<ul> 
    <li repeat.for="item of items"> 
     <input type="checkbox" value.bind="item.id" checked.bind="selectedItems"> 
     ${item.name} 
    </li> 
</ul> 

Damit dies funktioniert, muss ich eigentlich this.selectedItems = ["0", "2"] tun, die nur von anderen Vergleichs Probleme zu einem Bündel führt in mein eigener Code. Ich möchte auch nicht das ausgewählte Element als Zeichenfolge an den Server später beim Speichern der Daten senden.

Ich habe versucht, einen einfachen Wert-Konverter, die toString toview und parseInt fromView konvertiert, aber ich kann diesen Konverter auf dem Array von selectedItems nicht ausgeführt:

export class IntValueConverter { 
    toView (val) { 
     return val.toString(); 
    } 

    fromView (val) { 
     return parseInt(val); 
    } 
} 

Wie würden Sie über die Lösung dieses gehen?

Answer 1

Sie haben es fast schon. Es gibt ein kleines Problem mit diesem Teil:

<input type="checkbox" value="${item.id}" checked.bind="selectedItems"> 

Das <input> des Elements value Attribut alles nötigt es in eine Zeichenfolge zugewiesen ist. Nicht nur das, eine Stringinterpolationsbindung (zB ${...}) zwingt auch alles zu einer Zeichenkette. Sie müssen die numerische Element-ID beibehalten. Ersetzen Sie value="${item.id}" durch model.bind="item.id" und es wird funktionieren. Kein Bedarf für einen Konverter.

Zufälligerweise I just pushed eine Reihe von erschöpfenden Dokumente auf Kontrollkästchen, Radio und wählen Sie Bindung an die Aurelia Bindung Repo. Sie wurden noch nicht in der offiziellen Aurelia Docs-App veröffentlicht, aber sie sollten am Dienstag dort sein.

Auch - wenn Sie etwas seltsam mit Elementen sehen, deren ID ist Null - gibt es a fix am Dienstag auch ausgehen.

Schließlich weiß ich nicht Ihre Frage, aber für andere, die hier auf der Suche landen für verbindliche Zahlen in Formen, hier ein paar einfache Beispiele mit einem benutzerdefinierten Element und benutzerdefinierte Attribute:

https://gist.run/?id=d9d8dd9df7be2dd2f59077bad3bfb399