diff --git a/packages/ember-views/lib/system/build-component-template.js b/packages/ember-views/lib/system/build-component-template.js index 30e0d09b695..95949072ac8 100644 --- a/packages/ember-views/lib/system/build-component-template.js +++ b/packages/ember-views/lib/system/build-component-template.js @@ -139,6 +139,14 @@ function normalizeComponentAttributes(component, isAngleBracket, attrs) { var attributeBindings = component.attributeBindings; var i, l; + if (attrs.id && getValue(attrs.id)) { + // Do not allow binding to the `id` + normalized.id = getValue(attrs.id); + component.elementId = normalized.id; + } else { + normalized.id = component.elementId; + } + if (attributeBindings) { for (i = 0, l = attributeBindings.length; i < l; i++) { var attr = attributeBindings[i]; @@ -178,14 +186,6 @@ function normalizeComponentAttributes(component, isAngleBracket, attrs) { } } - if (attrs.id && getValue(attrs.id)) { - // Do not allow binding to the `id` - normalized.id = getValue(attrs.id); - component.elementId = normalized.id; - } else { - normalized.id = component.elementId; - } - if (attrs.tagName) { component.tagName = attrs.tagName; } diff --git a/packages/ember-views/tests/views/view/attribute_bindings_test.js b/packages/ember-views/tests/views/view/attribute_bindings_test.js index 082fcf0cbc3..5752ba1963e 100644 --- a/packages/ember-views/tests/views/view/attribute_bindings_test.js +++ b/packages/ember-views/tests/views/view/attribute_bindings_test.js @@ -466,3 +466,14 @@ QUnit.test('role attribute is not included if not provided', function() { ok(!view.element.hasAttribute('role'), 'role attribute is not present'); }); + +QUnit.test('can set id initially via attributeBindings', function() { + view = EmberView.create({ + attributeBindings: ['specialSauce:id'], + specialSauce: 'special-sauces-id' + }); + + appendView(); + + equal(view.$().attr('id'), 'special-sauces-id', 'id properly used from attributeBindings'); +});