Ember Views Refactor

Proposals
1

Proposing a minor refactor of ember views. Mainly for improving aesthetics of the output, HTML attribute compliance, and possibly minor perf improvements.

Typical DOM node generation for a view currently looks something like this:

<div id="ember638" class="ember-view"></div>

or with an action:

<div id="ember639" class="ember-view" data-ember-action="3"></div>

The proposal is to generate this instead:

<div data-ember-id="638"></div>

or with an action:

<div data-ember-id="639" data-ember-action="3"></div>

Why?

  • ‘ember-view’ class has nothing to do with styling.
  • ‘ember-view’ selector is currently is only used for jQuery event delegation. Can check for existence of data-ember-id instead.
  • Currently prohibits the use of your own ‘id’ attribute.
  • Proper use of html5 data attributes
  • Bring in-line with actions
  • Reduce overall output

It doesn’t look like much work to update. Trying to see other’s thoughts before starting a PR.

3 Likes
2

Ember might rely on the performance characteristics of finding an element by id, so changing id to data-ember-id might come with performance regressions.

3

@samg Looking at the source, they don’t appear to lookup by id in the DOM. They store every view in a global hash: Ember.View.views by this id for referencing.

4

Oh, interesting! If Ember doesn’t need to use the elements’ id attributes, that might make it easier to match <label>s with <input>s in forms.

5

It’s possible to override the id, just using id in your view. For example:

<label for="name">Name</label>
{{input type="text" id="name"}}
6

If this can be achieved without negative performance impact, I would be in favor of the change, likely as something that would land in 2.0.

3 Likes