数据列表可以与ember.js select一起使用吗 [英] Can a datalist be used with ember.js select

问题描述

ember.js 1.0

ember.js 1.0

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

I am using an ember.js select list, and was wondering if it is possible to use instead of the normal

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

推荐答案

数据列表是标准HTML，因此您可以在Ember内部使用(对于支持数据列表的浏览器).唯一真正的技巧是，本机Ember input 视图组件不会通过 list 属性传递，从而无法连接 datalist .幸运的是，扩展 Ember.TextView 使其轻松完成您想做的事情很容易.

datalist is standard HTML, so you can use it inside of Ember (for browsers that support datalist). The only real trick is that the native Ember input view component doesn't pass through the list attribute to allow you to hook up the datalist. Luckily it's very easy to extend Ember.TextView to make it do what you want.

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

然后在模板中执行以下操作:

Then in your template you just do something like this:

{{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

Here's a jsbin : http://jsbin.com/ucanam/977/edit

这篇关于数据列表可以与ember.js select一起使用吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！