Ember.Select与未绑定的选项列表 [英] Ember.Select with an unbound options list

问题描述

在我正在处理的ember.js应用程序（ember v1.8.0-beta1，ember-cli）中，我有一个包含国家/地区选择下拉列表的简单注册类型表单的页面。问题在于，由于该字段具有相对较大数量的选项（确切地说是244），所以渲染性能很大，当该选择字段添加到模板时，路由需要几秒钟的时间才能呈现。 / p>

我假设这种放缓是因为Ember必须为244 < option> 视图中的每一个创建绑定在选择中，所以在我发现的这本菜谱条目之后，我试图创建一个未绑定的 Ember.Select 版本，如下所示：

app / views / unbound-select。 js

 从ember导入Ember; 
 
导出默认Ember.Select.extend（{
 optionView：Ember.SelectOption.extend（{
 templateName：'unbound-option'
}）
}）; 
  

app / templates / unbound-option.hbs

  {{unbound view.label}} 
  

应用/templates/signup.hbs

  ... 
 {{viewunbound-selectvalue = country content =国家}} 
 ... 
  

但是，这样做而不是使用常规的 Ember.Select 似乎没有帮助渲染速度。是否有可能在我的实现中丢失的东西，会导致所有的< option> 仍然被绑定？

解决方案

看到您的未绑定的扩展名 Ember.Select 同样缓慢， code> Ember.Select 很慢。从文档，最后一段：

选择视图功能非常丰富，渲染许多项目时可能会执行不良。因此，它还没有像其他输入一样转换成组件或帮助器。

In an ember.js application that I am working on (ember v1.8.0-beta1, ember-cli), I have a page with a simple sign-up type form that includes a country select dropdown. The problem is that since this field has a relatively large number of options (244 to be exact), there is a big rendering performance hit, the route takes almost a full second longer to render when that select field is added to the template.

I assummed that this slowdown was due to Ember having to create bindings for each of the 244 <option> views within the select, so following this cookbook entry that I found, I attempted to create an unbound version of Ember.Select like so:

app/views/unbound-select.js

import Ember from 'ember';

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

app/templates/unbound-option.hbs

{{unbound view.label}}

app/templates/signup.hbs

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

However, doing this instead of using a regular Ember.Select does not seem to help with the rendering speed at all. Is there maybe something that I'm missing in my implementation that would be causing all the <option>'s to still be bound?

解决方案

Seeing as your unbound extension of Ember.Select is just as slow, I'd venture that Ember.Select is simply slow. From the docs, last paragraph:

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.

这篇关于Ember.Select与未绑定的选项列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！