Class Ember.Templates.components
Input (options) public
Defined in packages/@ember/-internals/glimmer/lib/components/input.ts:66
- options
- Hash
The Input
component lets you create an HTML <input>
element.
creates an <input>
element with type="text"
and value set to 987.
Text field
If no type
argument is specified, a default of type 'text' is used.
In this example, the initial value in the <input>
will be set to the value of
this.searchWord
. If the user changes the text, the value of this.searchWord
will also be
updated.
Actions
The Input
component takes a number of arguments with callbacks that are invoked in response to
user events.
enter
insert-newline
escape-press
focus-in
focus-out
key-down
key-press
key-up
These callbacks are passed to Input
like this:
Starting with Ember Octane, we recommend using the {{on}}
modifier to call actions
on specific events, such as the input event.
The event name (e.g. focusout
, input
, keydown
) always follows the casing
that the HTML standard uses.
<input>
HTML Attributes to Avoid
In most cases, if you want to pass an attribute to the underlying HTML <input>
element, you
can pass the attribute directly, just like any other Ember component.
In this example, the size
attribute will be applied to the underlying <input>
element in the
outputted HTML.
However, there are a few attributes where you must use the @
version.
@type
: This argument is used to control which Ember component is used under the hood@value
: The@value
argument installs a two-way binding onto the element. If you wanted a one-way binding, use<input>
with thevalue
property and theinput
event instead.@checked
(for checkboxes): like@value
, the@checked
argument installs a two-way binding onto the element. If you wanted a one-way binding, use<input type="checkbox">
withchecked
and theinput
event instead.
Checkbox
To create an <input type="checkbox">
:
This will bind the checked state of this checkbox to the value of isEmberized
-- if either one
changes, it will be reflected in the other.
LinkTo public
Defined in packages/@ember/-internals/glimmer/lib/components/link-to.ts:42
The LinkTo
component renders a link to the supplied routeName
passing an optionally
supplied model to the route as its model
context of the route. The block for LinkTo
becomes the contents of the rendered element:
This will result in:
1 2 3 |
<a href="/hamster-photos"> Great Hamster Photos </a> |
Disabling the LinkTo
component
The LinkTo
component can be disabled by using the disabled
argument. A disabled link
doesn't result in a transition when activated, and adds the disabled
class to the <a>
element.
(The class name to apply to the element can be overridden by using the disabledClass
argument)
Handling href
<LinkTo>
will use your application's Router to fill the element's href
property with a URL
that matches the path to the supplied routeName
.
Handling current route
The LinkTo
component will apply a CSS class name of 'active' when the application's current
route matches the supplied routeName. For example, if the application's current route is
'photoGallery.recent', then the following invocation of LinkTo
:
will result in
1 2 3 |
<a href="/hamster-photos/this-week" class="active"> Great Hamster Photos </a> |
The CSS class used for active classes can be customized by passing an activeClass
argument:
1 2 3 |
<a href="/hamster-photos/this-week" class="current-url"> Great Hamster Photos </a> |
Keeping a link active for other routes
If you need a link to be 'active' even when it doesn't match the current route, you can use the
current-when
argument.
This may be helpful for keeping links active for:
- non-nested routes that are logically related
- some secondary menu approaches
- 'top navigation' with 'sub navigation' scenarios
A link will be active if current-when
is true
or the current
route is the route this link would transition to.
To match multiple routes 'space-separate' the routes:
Supplying a model
An optional model
argument can be used for routes whose
paths contain dynamic segments. This argument will become
the model context of the linked route:
1 2 3 |
Router.map(function() { this.route("photoGallery", {path: "hamster-photos/:photo_id"}); }); |
1 2 3 |
<a href="/hamster-photos/42"> Tomster </a> |
Supplying multiple models
For deep-linking to route paths that contain multiple
dynamic segments, the models
argument can be used.
As the router transitions through the route path, each supplied model argument will become the context for the route with the dynamic segments:
1 2 3 4 5 |
Router.map(function() { this.route("photoGallery", { path: "hamster-photos/:photo_id" }, function() { this.route("comment", {path: "comments/:comment_id"}); }); }); |
This argument will become the model context of the linked route:
1 2 3 |
<a href="/hamster-photos/42/comments/718"> A+++ would snuggle again. </a> |
Supplying an explicit dynamic segment value
If you don't have a model object available to pass to LinkTo
,
an optional string or integer argument can be passed for routes whose
paths contain dynamic segments. This argument will become the value
of the dynamic segment:
1 2 3 |
Router.map(function() { this.route("photoGallery", { path: "hamster-photos/:photo_id" }); }); |
1 2 3 |
<a href="/hamster-photos/42"> Tomster </a> |
When transitioning into the linked route, the model
hook will
be triggered with parameters including this passed identifier.
Supplying query parameters
If you need to add optional key-value pairs that appear to the right of the ? in a URL,
you can use the query
argument.
This will result in:
1 2 3 |
<a href="/hamster-photos?page=1&per_page=20"> Great Hamster Photos </a> |
Textarea public
Defined in packages/@ember/-internals/glimmer/lib/components/textarea.ts:9
The Textarea
component inserts a new instance of <textarea>
tag into the template.
The @value
argument provides the content of the <textarea>
.
This template:
Would result in the following HTML:
1 2 3 |
<textarea class="ember-text-area"> A bunch of text </textarea> |
The @value
argument is two-way bound. If the user types text into the textarea, the @value
argument is updated. If the @value
argument is updated, the text in the textarea is updated.
In the following example, the writtenWords
property on the component will be updated as the user
types 'Lots of text' into the text area of their browser's window.
editor.js | |
1 2 3 4 5 6 |
import Component from ' /component'; import { tracked } from ' /tracking'; export default class WordEditorComponent extends Component { writtenWords = "Lots of text that IS bound"; } |
Would result in the following HTML:
1 2 3 |
<textarea class="ember-text-area"> Lots of text that IS bound </textarea> |
If you wanted a one way binding, you could use the <textarea>
element directly, and use the
value
DOM property and the input
event.
Actions
The Textarea
component takes a number of arguments with callbacks that are invoked in
response to user events.
enter
insert-newline
escape-press
focus-in
focus-out
key-press
These callbacks are passed to Textarea
like this:
Classic Invocation Syntax
The Textarea
component can also be invoked using curly braces, just like any other Ember
component.
For example, this is an invocation using angle-bracket notation:
You could accomplish the same thing using classic invocation:
The main difference is that angle-bracket invocation supports any HTML attribute using HTML attribute syntax, because attributes and arguments have different syntax when using angle-bracket invocation. Curly brace invocation, on the other hand, only has a single syntax for arguments, and components must manually map attributes onto component arguments.
When using classic invocation with {{textarea}}
, only the following attributes are mapped onto
arguments:
- rows
- cols
- name
- selectionEnd
- selectionStart
- autocomplete
- wrap
- lang
- dir
- value
Classic layout
and layoutName
properties
Because HTML textarea
elements do not contain inner HTML the layout
and
layoutName
properties will not be applied.