adding PR #59 into 3.2 and 3.3 (#110)

ember-learn · Jul 9, 2018 · 4181d7d · 4181d7d
1 parent 7dc4b0b
commit 4181d7d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 42 deletions.
diff --git 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
 <a id="ember239" class="ember-view" href="#/photos">Fotos</a>
-
-<input id="ember257" class="ember-view ember-text-field" type="text"
-       title="Name">
 ```
 
-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
-<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a>
-
-<input id="ember259" class="ember-view ember-text-field"
-       type="text" data-toggle="tooltip" data-placement="bottom" title="Name">
+<a id="ember239" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a>
 ```
diff --git 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
 <a id="ember239" class="ember-view" href="#/photos">Fotos</a>
-
-<input id="ember257" class="ember-view ember-text-field" type="text"
-       title="Name">
 ```
 
-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
-<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a>
-
-<input id="ember259" class="ember-view ember-text-field"
-       type="text" data-toggle="tooltip" data-placement="bottom" title="Name">
+<a id="ember239" class="ember-view" href="#/photos" data-toggle="dropdown" lang="es">Fotos</a>
 ```