Ember.Select with an unbound options list

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/25814796/ember-select-with-an-unbound-options-list

标签

javascript

data-binding

ember.js

handlebars.js

ember-cli