奧裏利亞轉發：model.bind不工作的單選按鈕

Question

我創建一組單選按鈕的Aurelia路上，像這樣的代碼：

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

第二個問題是輸入值總是字符串，所以當設置一個初始值時，它必須是一個字符串。例如：

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(); 
    } 
} 

用法：

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

運行實例https://gist.run/?id=1465151dd5d1afdb7fc7556e17baec35