Class LinkComponent

$ (selector) JQuery public

Inherited from Component packages/ember-glimmer/lib/component.js:875

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.

didReceiveAttrs public

Inherited from Component packages/ember-glimmer/lib/component.js:758

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.

didRender public

Inherited from Component packages/ember-glimmer/lib/component.js:778

Available since v1.13.0

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

didUpdate public

Inherited from Component packages/ember-glimmer/lib/component.js:842

Available since v1.13.0

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

didUpdateAttrs public

Inherited from Component packages/ember-glimmer/lib/component.js:810

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.

readDOMAttr (name) public

Inherited from Component packages/ember-glimmer/lib/component.js:645

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.

rerender public

Inherited from Ember.ViewMixin packages/ember-views/lib/mixins/view_support.js:122

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.

send (actionName, context) public

Inherited from Ember.ActionHandler packages/ember-runtime/lib/mixins/action_handler.js:167

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

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) {
      // ...
    }
  }
});

sendAction (action, params) public

Inherited from Ember.ActionSupport packages/ember-views/lib/mixins/action_support.js:27

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:

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.

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.

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")}}

1
2
3
4
5
6
7
8
9

import Controller from '@ember/controller';

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

willRender public

Inherited from Component packages/ember-glimmer/lib/component.js:794

Available since v1.13.0

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

willUpdate public

Inherited from Component packages/ember-glimmer/lib/component.js:826

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.