Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Finish converting link-to and input to angle brackets #797

Merged
merged 6 commits into from
May 27, 2019
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion guides/release/routing/redirection.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
32 changes: 20 additions & 12 deletions guides/release/templates/input-helpers.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand All @@ -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"}} />
rwjblue marked this conversation as resolved.
Show resolved Hide resolved
```

The following event types are supported (dasherized format):
Expand All @@ -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"/>
rwjblue marked this conversation as resolved.
Show resolved Hide resolved
```

Checkboxes support the following properties:
Expand All @@ -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" />
rwjblue marked this conversation as resolved.
Show resolved Hide resolved
```


## 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" />
rwjblue marked this conversation as resolved.
Show resolved Hide resolved
```

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`
Expand All @@ -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" />
rwjblue marked this conversation as resolved.
Show resolved Hide resolved
```

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.