オーレリアリピータは：model.bindは、ラジオボタンのために働いていない

Question

私はこのようなコードでアウレリアのラジオボタンのセットを作成しています。このようにそれをやって、しかし

<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> 

私はそのmodel.bindを発見しましたラジオボタンがチェックされていると、対応するクラスのoptionValueに値が設定されません。同様に、クラスのoptionValueに値が割り当てられている場合、適切なラジオボタンはチェックされません。私はこれがリピータだけで起こっていることを発見しました。私の場合、オプションは数字です。ここで間違っているかもしれないことを私に教えてください。

Answer 1

最初の問題は、オブジェクトを操作するときにmodel.bindを使用する必要があることです。プリミティブ型で作業しているので、代わりにvalue.bindを使用する必要があります。

第2の問題は、入力値が常に文字列であることです。そのため、初期値を設定するときは、文字列でなければなりません。たとえば、次のように

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'; 
} 

---

あなたが本当にあなたのビューモデルにint型を使用する場合は、値を変換するValueConverterを作成することができますビューに/からビューを渡すときはintになります。例えば：

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

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

使用法： `ID = "$ {オプション} _id"`と `model.bind = "オプション"`：

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

は、あなたがやっている例https://gist.run/?id=1465151dd5d1afdb7fc7556e17baec35