html 5 데이터리스트를 사용하는 Aurelia 바인딩 동작

Question

이 요점 (https://gist.run/?id=549282ece087785a3b7f6eb9c9d6a6d4)에서 selectedValue에 "option json object"값이 없어야합니다. 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> 

이

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

사용자가 무엇을 입력 무료입니다 app.js 그들은 원하는 내용, 심지어는 제안과 일치하지 않는 datalist 그래서 그것을 계획해야합니다.