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

Question

余烬.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 中使用它（对于支持数据列表的浏览器）。唯一真正的技巧是原生 Emberinput视图组件不会通过该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>