Aurelia Repeater: model.bind arbeitet nicht für Radiobuttons

Question

Ich bin eine Reihe von Radio-Buttons in Aurelia mit dem Code wie folgt zu erstellen:

<div repeat.for="option of options"> 
     <input type="radio" id="${option}_id" name="radio_options" model.bind="option" checked.bind="optionValue"/> 
     <label for="${option}_id" id="${option}_label">${option}</label> 
    </div> 

jedoch es auf diese Weise tun, entdeckte ich, dass model.bind funktioniert nicht - der optionValue in der entsprechenden Klasse ist nicht ausgefüllt, wenn das Optionsfeld aktiviert ist. Wenn ein Wert in der Klasse optionValue zugewiesen ist, wird das entsprechende Optionsfeld nicht aktiviert. Ich fand das nur mit Repeater. Optionen sind in meinem Fall Zahlen. Könnten Sie mir bitte helfen, herauszufinden, was hier falsch ist?

Answer 1

Das erste Problem ist, dass model.bind bei der Arbeit mit Objekten verwendet werden sollte. Da Sie mit einem primitiven Typ arbeiten, sollten Sie stattdessen value.bind verwenden.

Das zweite Problem besteht darin, dass Eingabewerte immer Zeichenfolgen sind. Wenn Sie also einen Anfangswert festlegen, muss es eine Zeichenfolge sein. Zum Beispiel:

Html:

<template> 
    <div repeat.for="option of options"> 
    <input type="radio" id="${option}_id" name="radio_options" value.bind="option" checked.bind="optionValue"/> 
    <label for="${option}_id" id="${option}_label">${option}</label> 
    </div> 
    <p>Selected Option: ${optionValue} </p> 
</template> 

JS:

export class App { 
    options = [ 1, 2, 3, 4 ] 
    optionValue = '3'; 
} 

---

Wenn Sie wirklich int verwenden in Ihrem View-Modell möchten, können Sie einen Valueconverter erstellen, den Wert zu konvertieren zu int, wenn Sie es zu/von der Ansicht übergeben. Zum Beispiel:

export class AsIntValueConverter { 
    fromView(value) { 
    return Number.parseInt(value); 
    } 

    toView(value) { 
    return value.toString(); 
    } 
} 

Verbrauch:

<input type="radio" id="${option}_id" name="radio_options" value.bind="option" checked.bind="optionValue | asInt"/> 

Lauf Beispiel https://gist.run/?id=1465151dd5d1afdb7fc7556e17baec35