javascript - Ember.Select 带有未绑定(bind)的选项列表

Question

在我正在开发的 ember.js 应用程序(ember v1.8.0-beta1、ember-cli)中，我有一个带有简单注册类型表单的页面，其中包含国家/地区选择下拉列表。问题是，由于该字段具有相对较多的选项(确切地说是 244 个)，因此渲染性能会受到很大影响，当该选择字段添加到模板中时，该路线的渲染时间要长几乎整整一秒。

我认为这种速度减慢是由于 Ember 必须为 244 <option> 中的每一个创建绑定(bind)。选择内的 View ，因此以下 this cookbook entry我发现，我尝试创建 Ember.Select 的未绑定(bind)版本像这样:

app/views/unbound-select.js

import Ember from 'ember';

export default Ember.Select.extend({
    optionView: Ember.SelectOption.extend({
        templateName: 'unbound-option'
    })
});

应用程序/模板/unbound-option.hbs

{{unbound view.label}}

应用程序/模板/signup.hbs

...
{{view "unbound-select" value=country content=countries}}
...

但是，这样做而不是使用常规 Ember.Select似乎对渲染速度没有任何帮助。我的实现中是否缺少某些东西会导致所有 <option>仍受约束吗？

Answer 1

鉴于 Ember.Select 的未绑定(bind)扩展也同样慢，我敢说 Ember.Select 确实很慢。来自 the docs ，最后一段:

The select view is extremely feature-rich, and may perform badly when rendering many items. Due to this, it has not yet been converted into an component or helper like other inputs.