[Bugfix Beta] Fix attrs in className and attribute bindings

Author: chadhietala

packages/ember-glimmer/lib/utils/bindings.js

@@ -14,6 +14,17 @@ function referenceForKey(component, key) {
 }
 
 function referenceForParts(component, parts) {
+  let isAttrs = parts[0] === 'attrs';
+
+  // TODO deprecate this
+  if (isAttrs) {
+    parts.shift();
+
+    if (parts.length === 1) {
+      return referenceForKey(component, parts[0]);
+    }
+  }
+
   return referenceFromParts(component[ROOT_REF], parts);
 }
 

packages/ember-glimmer/tests/integration/components/attribute-bindings-test.js

@@ -34,6 +34,37 @@ moduleFor('Attribute bindings integration', class extends RenderingTest {
     this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'data-foo': 'foo', 'data-bar': 'bar' }, content: 'hello' });
   }
 
+  ['@test it can have attribute bindings with attrs']() {
+    let FooBarComponent = Component.extend({
+      attributeBindings: ['attrs.foo:data-foo', 'attrs.baz.bar:data-bar']
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar foo=model.foo baz=model.baz}}', {
+      model: { foo: undefined, baz: { bar: 'bar' } }
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', content: 'hello', attrs: { 'data-bar': 'bar' } });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', content: 'hello', attrs: { 'data-bar': 'bar' } });
+
+    this.runTask(() => {
+      set(this.context, 'model.foo', 'foo');
+      set(this.context, 'model.baz.bar', undefined);
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'data-foo': 'foo' }, content: 'hello' });
+
+    this.runTask(() => set(this.context, 'model', {
+      foo: undefined, baz: { bar: 'bar' }
+    }));
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', content: 'hello', attrs: { 'data-bar': 'bar' } });
+  }
+
   ['@test it can have attribute bindings with a nested path']() {
     let FooBarComponent = Component.extend({
       attributeBindings: ['foo.bar:data-foo-bar']

packages/ember-glimmer/tests/integration/components/class-bindings-test.js

@@ -44,6 +44,37 @@ moduleFor('ClassNameBindings integration', class extends RenderingTest {
     this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view foo enabled sad') }, content: 'hello' });
   }
 
+  ['@test attrs in classNameBindings']() {
+    let FooBarComponent = Component.extend({
+      classNameBindings: ['attrs.joker:purple:green', 'attrs.batman.robin:black:red']
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar joker=model.wat batman=model.super}}', {
+      model: { wat: false, super: { robin: true } }
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view green black') }, content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view green black') }, content: 'hello' });
+
+    this.runTask(() => {
+      set(this.context, 'model.wat', true);
+      set(this.context, 'model.super.robin', false);
+    });
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view purple red') }, content: 'hello' });
+
+    this.runTask(() => set(this.context, 'model', {
+      wat: false, super: { robin: true }
+    }));
+
+    this.assertComponentElement(this.firstChild, { tagName: 'div', attrs: { 'class': classes('ember-view green black') }, content: 'hello' });
+  }
+
   ['@test it can have class name bindings in the template']() {
     this.registerComponent('foo-bar', { template: 'hello' });