{"action":"opened","issue":{"url":"https://api.github.com/repos/ebryn/ember-ionic/issues/19","labels_url":"https://api.github.com/repos/ebryn/ember-ionic/issues/19/labels{/name}","comments_url":"https://api.github.com/repos/ebryn/ember-ionic/issues/19/comments","events_url":"https://api.github.com/repos/ebryn/ember-ionic/issues/19/events","html_url":"https://github.com/ebryn/ember-ionic/issues/19","id":78270796,"number":19,"title":"Angle-bracket components","user":{"login":"theharq","id":1143421,"avatar_url":"https://avatars.githubusercontent.com/u/1143421?v=3","gravatar_id":"","url":"https://api.github.com/users/theharq","html_url":"https://github.com/theharq","followers_url":"https://api.github.com/users/theharq/followers","following_url":"https://api.github.com/users/theharq/following{/other_user}","gists_url":"https://api.github.com/users/theharq/gists{/gist_id}","starred_url":"https://api.github.com/users/theharq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/theharq/subscriptions","organizations_url":"https://api.github.com/users/theharq/orgs","repos_url":"https://api.github.com/users/theharq/repos","events_url":"https://api.github.com/users/theharq/events{/privacy}","received_events_url":"https://api.github.com/users/theharq/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-05-19T22:15:10Z","updated_at":"2015-05-19T22:15:10Z","closed_at":null,"body":"Hi there,\r\n\r\nAfter this PR was merged https://github.com/emberjs/ember.js/pull/11141\r\n\r\nwhich introduced these changes:\r\n\r\n> 2. Attributes specified as strings (with “quotation marks”) are inserted into the DOM as attributes. For the most part, this eliminates the need for attributeBindings.\r\n> 3. Angle bracket components do not support attrs at the top-level (the entire attrs proxy functionality is disabled).\r\n\r\nI had to fix some components to read the params from `this.attrs` instead using `this.get`\r\n\r\n\r\n```javascript\r\n// ember-ionic/addon/components/ion-header.js\r\n\r\nimport Ember from 'ember';\r\n\r\nexport default Ember.Component.extend({\r\n  tagName: 'ion-header',\r\n  classNames: ['bar', 'bar-header'],\r\n  classNameBindings: ['kindClass'],\r\n\r\n  kindClass: Ember.computed('kind', function() {\r\n    let kind = this.attrs.kind;\r\n    if (kind) {\r\n      return `bar-${kind}`;\r\n    }\r\n  })\r\n});\r\n```\r\n\r\nWith this change I could use the component in this form:\r\n\r\n\r\n```html\r\n{{#ion-header kind=test}}<div class=\"h1 title\">Header</div>{{/ion-header}}\r\n```\r\nRenders: (good)\r\n```html\r\n<ion-header kind=\"balanced\"><div class=\"h1 title\">Header</div></ion-header>\r\n```\r\n\r\nBut using the angle-bracket form:\r\n```html\r\n<ion-header id=\"ember447\" class=\"ember-view bar bar-header bar-balanced\">\r\n  <div class=\"h1 title\">Header</div>\r\n</ion-header>\r\n```\r\nRenders: (bad)\r\n```html\r\n<ion-header id=\"ember446\" kind=\"balanced\" class=\"ember-view bar bar-header\">\r\n  <div class=\"h1 title\">Header</div>\r\n</ion-header>\r\n```\r\nwhich returns the `kind` argument as an attribute :cry: \r\n\r\nso I guess the only valid way ( unless you don't use any argument ) is without the angle-bracket form, for now\r\n"}}