erm
ember-ref-modifier
npm i ember-ref-modifier
erm

ember-ref-modifier

Ember Ref Modifier

by Alex Kanunnikov

1.0.1 (see all)License:MITTypeScript:Not Found
npm i ember-ref-modifier
Readme

ember-ref-modifier

Greenkeeper badge


Check ember-ref-bucket first!

ember-ref-modifier likely will be deprecated after ember-ref-bucket major release


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 v3.13 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"

<button {{ref this.callback}} data-name="foo">
  Click me baby, one more time!
</button>
class Component {
    @action callback(node) {
        this.node = node;
    }
}


<div {{ref this "divContainer" }}></div>
{{#-in-element this.divContainer}}
  Hello!
{{/-in-element}}

// hash helper must return an EmberObject! The default hash helper returns a pojo.
{{#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.

Downloads/wk

6.6K

GitHub Stars

42

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

8

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
1.0.1
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial