Skip to content
Ember Ref Modifier
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon/modifiers deprecation warning Mar 15, 2019
app/modifiers
config first commit Feb 19, 2019
tests
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierrc first commit Feb 19, 2019
.template-lintrc.js
.travis.yml
.watchmanconfig
CONTRIBUTING.md
LICENSE.md
README.md
ember-cli-build.js
index.js first commit Feb 19, 2019
package.json
testem.js
yarn.lock

README.md

ember-ref-modifier

Greenkeeper badge

An implementation of the {{ref}} element modifier. Heavily inspired by ember-on-modifier and @ember/render-modifiers.

Installation

ember install ember-ref-modifier

Compatibility

  • Ember.js v2.18 or above
  • ember-cli v2.13 or above

Usage

<button {{ref this "button"}} data-name="foo">
  Click me baby, one more time!
</button>

{{this.button.dataset.name}} >> "foo"
<div {{ref this "divContainer" }}></div>
{{#-in-element this.divContainer}}
  Hello!
{{/-in-element}}
// hash helper must return an EmberObject!
{{#let (hash) as |ctx|}}
	<input id="name-input" {{ref ctx 'inputNode'}}>
	<label for={{ctx.inputNode.id}}> Enter your name </label>
{{/let}}

<button {{ref this "button"}}>
  Click me baby, one more time!
</button>
import Component from '@ember/component';

export default class BritneySpearsComponent extends Component {
  button!: DOMNode
}

This is essentially equivalent to:

didInsertElement() {
  super.didInsertElement();
  this.set('button', this.element.querySelector('button'));
}

It will also re-register property, if any of the passed parameters change.

Deprecations

Old syntaxis {{ref 'pathName' context}} will be deprecated in version 1.0.0.

Use {{ref context 'pathName'}} instead.

You can’t perform that action at this time.