From 7211fed7c5ec263a71d364de5afe26c991517fde Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Sun, 8 Jul 2018 23:08:00 -0400 Subject: [PATCH] adding PR #59 into 3.2 and 3.3 --- .../templates/binding-element-attributes.md | 33 +++++++------------ .../templates/binding-element-attributes.md | 33 +++++++------------ 2 files changed, 24 insertions(+), 42 deletions(-) diff --git a/guides/v3.2.0/templates/binding-element-attributes.md b/guides/v3.2.0/templates/binding-element-attributes.md index 0ae3e1969f..078fcd81fd 100644 --- a/guides/v3.2.0/templates/binding-element-attributes.md +++ b/guides/v3.2.0/templates/binding-element-attributes.md @@ -40,46 +40,37 @@ If `isAdministrator` is `false`, Handlebars will produce the following: ### Adding Other Attributes (Including Data Attributes) -By default, helpers and components only accept a limited number of HTML attributes. +By default, components only accept a limited number of HTML attributes. This means that some uncommon but perfectly valid attributes, such as `lang` or custom `data-*` attributes must be specifically enabled. For example, this template: ```handlebars {{#link-to "photos" data-toggle="dropdown" lang="es"}}Fotos{{/link-to}} - -{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}} ``` -renders the following HTML: +Will render the following HTML: ```html Fotos - - ``` -To enable support for these attributes an attribute binding must be -added to the component, e.g. +To enable support for these attributes, an attribute binding must be +added for each specific attribute on the component. +To do this, you can extend the appropriate components +in your application. For example, for `link-to` you would create your own version +of this component by extending [`Ember.LinkComponent`](https://www.emberjs.com/api/ember/release/classes/LinkComponent) -or [`Ember.TextField`](https://www.emberjs.com/api/ember/release/classes/TextField) -for the specific attribute: -```javascript -Ember.LinkComponent.reopen({ - attributeBindings: ['data-toggle', 'lang'] -}); +```javascript {data-filename="app/components/link-to/component.js"} +import LinkComponent from '@ember/routing/link-component'; -Ember.TextField.reopen({ - attributeBindings: ['data-toggle', 'data-placement'] +export default LinkComponent.extend({ + attributeBindings: ['data-toggle', 'lang'] }); ``` Now the same template above renders the following HTML: ```html -Fotos - - +Fotos ``` diff --git a/guides/v3.3.0/templates/binding-element-attributes.md b/guides/v3.3.0/templates/binding-element-attributes.md index 0ae3e1969f..078fcd81fd 100644 --- a/guides/v3.3.0/templates/binding-element-attributes.md +++ b/guides/v3.3.0/templates/binding-element-attributes.md @@ -40,46 +40,37 @@ If `isAdministrator` is `false`, Handlebars will produce the following: ### Adding Other Attributes (Including Data Attributes) -By default, helpers and components only accept a limited number of HTML attributes. +By default, components only accept a limited number of HTML attributes. This means that some uncommon but perfectly valid attributes, such as `lang` or custom `data-*` attributes must be specifically enabled. For example, this template: ```handlebars {{#link-to "photos" data-toggle="dropdown" lang="es"}}Fotos{{/link-to}} - -{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}} ``` -renders the following HTML: +Will render the following HTML: ```html Fotos - - ``` -To enable support for these attributes an attribute binding must be -added to the component, e.g. +To enable support for these attributes, an attribute binding must be +added for each specific attribute on the component. +To do this, you can extend the appropriate components +in your application. For example, for `link-to` you would create your own version +of this component by extending [`Ember.LinkComponent`](https://www.emberjs.com/api/ember/release/classes/LinkComponent) -or [`Ember.TextField`](https://www.emberjs.com/api/ember/release/classes/TextField) -for the specific attribute: -```javascript -Ember.LinkComponent.reopen({ - attributeBindings: ['data-toggle', 'lang'] -}); +```javascript {data-filename="app/components/link-to/component.js"} +import LinkComponent from '@ember/routing/link-component'; -Ember.TextField.reopen({ - attributeBindings: ['data-toggle', 'data-placement'] +export default LinkComponent.extend({ + attributeBindings: ['data-toggle', 'lang'] }); ``` Now the same template above renders the following HTML: ```html -Fotos - - +Fotos ```