Поведение связывания Aurelia с html 5 даталистом

Question

Пожалуйста, в этом списке ( https://gist.run/?id=549282ece087785a3b7f6eb9c9d6a6d4) selectedValue не должно иметь значение "option json object"? Кажется, что связывание с model.bind для элемента option html внутри элемента списка данных не работает так же, как внутри элемента select. Благодарю.

Answer 1

Система привязки не имеет специальной логики для ввода + список данных. Это легко добавить с 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);
}

Пользователи могут свободно вводить все, что хотят, даже то, что не соответствует предложению в списке данных, поэтому вам нужно планировать это.