Angle-bracket components

[theharq]

Hi there,

After this PR was merged emberjs/ember.js#11141

which introduced these changes:

1. Attributes specified as strings (with “quotation marks”) are inserted into the DOM as attributes. For the most part, this eliminates the need for attributeBindings.
2. Angle bracket components do not support attrs at the top-level (the entire attrs proxy functionality is disabled).

I had to fix some components to read the params from this.attrs instead using this.get

// ember-ionic/addon/components/ion-header.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ion-header',
  classNames: ['bar', 'bar-header'],
  classNameBindings: ['kindClass'],

  kindClass: Ember.computed('kind', function() {
    let kind = this.attrs.kind;
    if (kind) {
      return `bar-${kind}`;
    }
  })
});

With this change I could use the component in this form:

{{#ion-header kind=test}}<div class="h1 title">Header</div>{{/ion-header}}

Renders: (good)

<ion-header kind="balanced"><div class="h1 title">Header</div></ion-header>

But using the angle-bracket form:

<ion-header id="ember447" class="ember-view bar bar-header bar-balanced">
  <div class="h1 title">Header</div>
</ion-header>

Renders: (bad)

<ion-header id="ember446" kind="balanced" class="ember-view bar bar-header">
  <div class="h1 title">Header</div>
</ion-header>

which returns the kind argument as an attribute..so I guess the only valid way ( unless you don't use any argument ) is without the angle-bracket form, for now