数据列表可以与 ember.js 一起使用吗？

Question

ember.js 1.0

我正在使用一个 ember.js 选择列表，想知道是否可以使用它来代替普通的

<input type=text list=browsers>
 <datalist id=browsers>
   <option value="Firefox">
   <option value="IE">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Answer 1

datalist 是标准 HTML，因此您可以在 Ember 内部使用它（适用于支持数据列表的浏览器）。唯一真正的技巧是原生 Ember input 视图组件不会通过 list 属性来允许您连接 datalist。幸运的是，很容易扩展 Ember.TextView 以使其为所欲为。

App.DatalistText = Ember.TextField.extend({
  attributeBindings: ['list'],
  list : null
});

然后在您的模板中，您只需执行以下操作：

{{view App.DatalistText type="text" 
    value="" 
    class="form-control" 
    placeholder="Country" 
    disabledBinding="isNotEditing"
    list="countries"
    size="50"
}}
<datalist id="countries">
  {{#each model}}
    <option {{bindAttr value="this"}}>
  {{/each}}
</datalist>

这是一个 jsbin：http://jsbin.com/ucanam/977/edit

Answer 2

对于 ember.js 1.8，以下代码可以正常工作：

{{input type="text" value="" class="form-control" list="browsers-list"}}
<datalist id="browsers-list">
{{#each b in browsers}}
  <option {{bind-attr value=b}}>
{{/each}}
</datalist>