Merge pull request ember-learn#797 from ember-learn/linkto-and-input

Finish converting link-to and input to angle brackets

Author: locks

guides/release/routing/redirection.md

@@ -10,7 +10,7 @@ Ember allows you to control that access with a combination of hooks and methods
 One of the methods is [`transitionTo()`](https://www.emberjs.com/api/ember/release/classes/Route/methods/transitionTo?anchor=transitionTo).
 Calling `transitionTo()` from a route or
 [`transitionToRoute()`](https://www.emberjs.com/api/ember/release/classes/Controller/methods/transitionToRoute?anchor=transitionToRoute) from a controller will stop any transitions currently in progress and start a new one, functioning as a redirect.
-`transitionTo()` behaves exactly like the [link-to](../../templates/links/) helper.
+`transitionTo()` behaves exactly like the [`LinkTo`](../../templates/links/) helper.
 
 The other one is [`replaceWith()`](https://www.emberjs.com/api/ember/release/classes/Route/methods/transitionTo?anchor=replaceWith/) which works the same way as `transitionTo()`.
 The only difference between them is how they manage history.

guides/release/templates/input-helpers.md

@@ -1,18 +1,20 @@
-The [`{{input}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
-and [`{{textarea}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=textarea)
+The [`Input`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
+and [`Textarea`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=textarea)
 helpers in Ember.js are the easiest way to create common form controls.
 Using these helpers, you can create form controls that are almost identical to the native HTML `<input>` or `<textarea>` elements, but are aware of Ember's two-way bindings and can automatically update.
 
 ## Text fields
 
 ```handlebars
-{{input value="http://www.facebook.com"}}
+<label for="site">Site URL</label>
+<Input value="http://www.facebook.com" id="site" />
 ```
 
 Will become:
 
 ```html
-<input type="text" value="http://www.facebook.com"/>
+<label for="site">Site URL</label>
+<input type="text" value="http://www.facebook.com" id="site"/>
 ```
 
 You can pass the following standard `<input>` attributes within the input
@@ -37,7 +39,8 @@ unquoted, these values will be bound to a property on the template's current
 rendering context. For example:
 
 ```handlebars
-{{input type="text" value=this.firstName disabled=this.entryNotAllowed size="50"}}
+<label for="firstname">First Name</label>
+<input type="text" value={{this.firstName}} disabled={{this.entryNotAllowed}} size="50" id="firstname" />
 ```
 
 Will bind the `disabled` attribute to the value of `entryNotAllowed` in the
@@ -48,7 +51,8 @@ current context.
 To dispatch an action on specific events such as `key-press`, use the following
 
 ```handlebars
-{{input value=this.firstName key-press=(action "updateFirstName")}}
+<label for="firstname">First Name</label>
+<Input @value={{this.firstName}} @key-press={{action "updateFirstName" id="firstname"}} />
 ```
 
 The following event types are supported (dasherized format):
@@ -67,11 +71,12 @@ More [events types](https://www.emberjs.com/api/ember/release/classes/Component)
 ## Checkboxes
 
 You can also use the
-[`{{input}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
+[`Input`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=input)
 helper to create a checkbox by setting its `type`:
 
 ```handlebars
-{{input type="checkbox" name="isAdmin" checked=this.isAdmin}}
+<label for="is-admin">Admin: </label>
+<Input @type="checkbox" @name="isAdmin" @checked={{this.isAdmin}} id="is-admin"/>
 ```
 
 Checkboxes support the following properties:
@@ -91,19 +96,21 @@ Which can be bound or set as described in the previous section.
 Checkboxes are a special input type. If you want to dispatch an action on a certain [event](https://www.emberjs.com/api/ember/release/classes/Component), you will always need to define the event name in camelCase format:
 
 ```handlebars
-{{input type="checkbox" keyPress=(action "updateName")}}
+<label for="firstname">First Name</label>
+<Input @type="checkbox" @key-press={{action "updateName"}} id="firstname" />
 ```
 
 
 ## Text Areas
 
 ```handlebars
-{{textarea value=this.name cols="80" rows="6"}}
+<label for="firstname">First Name</label>
+<Textarea @value={{this.name}} cols="80" rows="6" id="firstname" />
 ```
 
 Will bind the value of the text area to `name` on the current context.
 
-[`{{textarea}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/textarea?anchor=textarea) supports binding and/or setting the following properties:
+[`Textarea`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/textarea?anchor=textarea) supports binding and/or setting the following properties:
 
 * `value`
 * `name`
@@ -128,7 +135,8 @@ Will bind the value of the text area to `name` on the current context.
 You might need to bind a property dynamically to an input if you're building a flexible form, for example. To achieve this you need to use the [`{{get}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/get?anchor=get) and [`{{mut}}`](https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/mut?anchor=mut) in conjunction like shown in the following example:
 
 ```handlebars
-{{input value=(mut (get this.person this.field))}}
+<label for="firstname">First Name</label>
+<Input @value={{mut (get this.person this.field)}} id="firstname" />
 ```
 
 The `{{get}}` helper allows you to dynamically specify which property to bind, while the `{{mut}}` helper allows the binding to be updated from the input. See the respective helper documentation for more detail.