Aurelia綁定行爲與HTML 5 datalist

Question

請在這個要點（https://gist.run/?id=549282ece087785a3b7f6eb9c9d6a6d4），selectedValue不應該有「選項json對象」的值？ 似乎與datalist元素內的選項html元素上的model.bind進行綁定，與select元素內部的方式不同。 謝謝。

Answer 1

綁定系統沒有針對input + datalist的特殊邏輯。這很容易用input.delegate添加綁定：

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

app.html

<template> 
    <input type="text" list="myDatalist" input.delegate="selectedValue = findOption($event.target.value)" /> 
    <datalist id="myDatalist"> 
    <option repeat.for="option of options">${option.name}</option> 
    </datalist> 

    <pre style="margin-top: 100px"><code>${selectedValue}</code></pre> 
</template> 

app.js

export class App { 
    selectedValue = null; 
    options = [ { id: 1, name: 'one' }, { id: 2, name: 'two' } ]; 
    findOption = value => this.options.find(x => x.name === value); 
} 

用戶可以自由在任何輸入他們想要的，甚至是不符合建議的東西datalist，所以你需要爲此計劃。