Skip to content
This repository has been archived by the owner on Oct 12, 2020. It is now read-only.

lifeart/ember-ref-modifier

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.