Aurelia绑定行为与html 5 datalist

时间:2016-12-02 17:48:04

标签: aurelia aurelia-binding

请在这个要点(https://gist.run/?id=549282ece087785a3b7f6eb9c9d6a6d4)中,selectedValue不应该具有“option json object”的值? 似乎在datalist元素内部的选项html元素上与model.bind绑定,与select元素内部的工作方式不同。 感谢。

1 个答案:

答案 0 :(得分:3)

绑定系统没有输入+数据列表的特殊逻辑。使用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);
}

用户可以随意输入他们想要的内容,即使与数据列表中的建议不匹配的内容也是如此,因此您需要为此进行规划。