Class TextField

public
import TextField from '@ember/component/text-field';

The internal class used to create text inputs when the {{input}} helper is used with type of text. See Ember.Templates.helpers.input for usage details.

Layout and LayoutName properties

Because HTML input elements are self closing layout and layoutName properties will not be applied.

Show:

selector
String
a jQuery-compatible selector string
returns
JQuery
the jQuery object for the DOM node

Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer. For example, calling component.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this component.

Available since v1.13.0

Called when the attributes passed into the component have been updated. Called both during the initial render of a container and during a rerender. Can be used in place of an observer; code placed here will be executed every time any attribute updates.

Available since v1.13.0

Called after a component has been rendered, both on initial render and in subsequent rerenders.

Available since v1.13.0

Called when the component has updated and rerendered itself. Called only during a rerender, not during an initial render.

Available since v1.13.0

Called when the attributes passed into the component have been changed. Called only during a rerender, not during an initial render.

name
String
the name of the attribute
returns
String

Normally, Ember's component model is "write-only". The component takes a bunch of attributes that it got passed in, and uses them to render its template.

One nice thing about this model is that if you try to set a value to the same thing as last time, Ember (through HTMLBars) will avoid doing any work on the DOM.

This is not just a performance optimization. If an attribute has not changed, it is important not to clobber the element's "hidden state". For example, if you set an input's value to the same value as before, it will clobber selection state and cursor position. In other words, setting an attribute is not always idempotent.

This method provides a way to read an element's attribute and also update the last value Ember knows about at the same time. This makes setting an attribute idempotent.

In particular, what this means is that if you get an <input> element's value attribute and then re-render the template with the same value, it will avoid clobbering the cursor and selection position. Since most attribute sets are idempotent in the browser, you typically can get away with reading attributes using jQuery, but the most reliable way to do so is through this method.

Renders the view again. This will work regardless of whether the view is already in the DOM or not. If the view is in the DOM, the rendering process will be deferred to give bindings a chance to synchronize.

If children were added during the rendering process using appendChild, rerender will remove them, because they will be added again if needed by the next render.

In general, if the display of your view changes, you should modify the DOM element directly instead of manually calling rerender, which can be slow.

actionName
String
The action to trigger
context
*
a context to send with the action

Triggers a named action on the ActionHandler. Any parameters supplied after the actionName string will be passed as arguments to the action target function.

If the ActionHandler has its target property set, actions may bubble to the target. Bubbling happens when an actionName can not be found in the ActionHandler's actions hash or if the action target function returns true.

Example

app/routes/welcome.js
1
2
3
4
5
6
7
8
9
10
11
12
import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    playTheme() {
      this.send('playMusic', 'theme.mp3');
    },
    playMusic(track) {
      // ...
    }
  }
});
action
String
the action to call
params
*
arguments for the action

Calls an action passed to a component.

For example a component for playing or pausing music may translate click events into action notifications of "play" or "stop" depending on some internal state of the component:

button.js
1
2
3
4
5
6
7
8
9
10
11
import Component from '@ember/component';

export default Component.extend({
  click() {
    if (this.get('isPlaying')) {
      this.sendAction('play');
    } else {
      this.sendAction('stop');
    }
  }
});

The actions "play" and "stop" must be passed to this play-button component:

1
2
{{! app/templates/application.hbs }}
{{play-button play=(action "musicStarted") stop=(action "musicStopped")}}

When the component receives a browser click event it translate this interaction into application-specific semantics ("play" or "stop") and calls the specified action.

app/controller/application.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    musicStarted() {
      // called when the play button is clicked
      // and the music started playing
    },
    musicStopped() {
      // called when the play button is clicked
      // and the music stopped playing
    }
  }
});

If no action is passed to sendAction a default name of "action" is assumed.

button.js
1
2
3
4
5
6
7
import Component from '@ember/component';

export default Component.extend({
  click() {
    this.sendAction();
  }
});
1
2
{{! app/templates/application.hbs }}
{{next-button action=(action "playNextSongInAlbum")}}
app/controllers/application.js
1
2
3
4
5
6
7
8
9
import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    playNextSongInAlbum() {
      ...
    }
  }
});

Available since v1.13.0

Called before a component has been rendered, both on initial render and in subsequent rerenders.

Available since v1.13.0

Called when the component is about to update and rerender itself. Called only during a rerender, not during an initial render.