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

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>

---

数据列表

是标准的HTML，因此您可以在Ember中使用它（对于支持数据列表的浏览器）。唯一真正的诀窍是原生的Ember

input

view组件不通过

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>

{{view App.DatalistText type=“text”
value=“”
class=“表单控制”
占位符=“国家”
disabledBinding=“isNotEditing”
list=“国家”
size=“50”
}}
{{{#每个模型}
{{/每个}}

---

这里有一个jsbin:

datalist

是标准HTML，因此您可以在Ember中使用它（对于支持datalist的浏览器）。唯一真正的诀窍是原生的Ember

input

view组件不通过

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>

{{view App.DatalistText type=“text”
value=“”
class=“表单控制”
占位符=“国家”
disabledBinding=“isNotEditing”
list=“国家”
size=“50”
}}
{{{#每个模型}
{{/每个}}

---

这里有一个jsbin:

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

{{input type=“text”value=”“class=“form control”list=“browsers list”}
{{{#浏览器中的每个b}
{{/每个}}

对于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>

{{input type=“text”value=”“class=“form control”list=“browsers list”}
{{{#浏览器中的每个b}
{{/每个}}

非常感谢-虽然这对我很有用（因此我接受了答案！），但我更喜欢选择风格的外观，但可以键入其他选项。然而，这在理解如何扩展方面非常有用。嗯。。。我想您可以开发一个自定义小部件，它的行为类似于输入/数据列表组合和选择列表的混合，但我不知道有任何“本机”html解决方案。我以前做过的是有一个选择列表，然后在旁边有一个小“+”按钮。单击按钮时，会弹出一个模式，要求您输入新值。当您在模式中单击“保存”时，将创建一个新的余烬模型并将其添加到支持选择列表的集合中。@JeremyGreen但这在最新版本中不起作用，您能提供帮助吗@VysakhSreenivasan，如下所述，这似乎是最新的余烬中的一个已知错误。非常感谢-虽然这对我来说很有用（因此是公认的答案！），但我更喜欢选择风格的外观和感觉，但可以键入其他选项。然而，这在理解如何扩展方面非常有用。嗯。。。我想您可以开发一个自定义小部件，它的行为类似于输入/数据列表组合和选择列表的混合，但我不知道有任何“本机”html解决方案。我以前做过的是有一个选择列表，然后在旁边有一个小“+”按钮。单击按钮时，会弹出一个模式，要求您输入新值。当您在模式中单击“保存”时，将创建一个新的余烬模型并将其添加到支持选择列表的集合中。@JeremyGreen但这在最新版本中不起作用，您能提供帮助吗@Vysakhserenivasan，如下所述，这似乎是最新版本中的一个已知错误。但这不起作用。Ember 1.11.3版本@Vysakhserenivasan看起来像一个已知的回归：但这不起作用Ember 1.11.3版本@Vysakhserenivasan看起来像一个已知的回归：