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中使用它（适用于支持datalist的浏览器）。唯一真正的诀窍是本机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>

可以将数据列表与ember.js选择一起使用

2 个答案: