# ember-ref-modifier

> Ember DOM reference modifier

Latest version **1.0.1** (published 2020-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-ref-modifier
pnpm add ember-ref-modifier
yarn add ember-ref-modifier
bun add ember-ref-modifier
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-06-30 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 10.* \|\| >= 12 |
| Dependencies | 1 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 43 |
| Author | Aleksandr Kanunnikov |
| Maintainers | lifeart |
| Keywords | ember-addon, ember-modifier, ember-element-modifier, ref-modifier, ref |

## Links

- npm: https://www.npmjs.com/package/ember-ref-modifier
- Repository: https://github.com/lifeart/ember-ref-modifier
- Homepage: https://github.com/lifeart/ember-ref-modifier#readme
- Issues: https://github.com/lifeart/ember-ref-modifier/issues
- npm.io page: https://npm.io/package/ember-ref-modifier

## Dependencies (1)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.20.5

## Recent versions

- 1.0.1 (latest) — 2020-06-30
- 1.0.0 — 2020-01-31
- 0.2.3 — 2020-01-30
- 0.1.3 — 2019-08-20
- 0.1.2 — 2019-03-17
- 0.0.1 — 2019-02-19

## README

# ember-ref-modifier

[![Greenkeeper badge](https://badges.greenkeeper.io/lifeart/ember-ref-modifier.svg)](https://greenkeeper.io/)

An implementation of the `{{ref}}` element modifier. 
Heavily inspired by [ember-on-modifier](https://github.com/buschtoens/ember-on-modifier) and  [`@ember/render-modifiers`](https://github.com/emberjs/ember-render-modifiers).

## Installation

```
ember install ember-ref-modifier
```

#### Compatibility

- Ember.js v3.13 or above
- ember-cli v2.13 or above

## Usage

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

{{this.button.dataset.name}} >> "foo"
```

--------------------------

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

```js
class Component {
	@action callback(node) {
		this.node = node;
	}
}

```

------------------------

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


```hbs
// 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}}
```


------------------------

------

```hbs
<button {{ref this "button"}}>
  Click me baby, one more time!
</button>
```

```ts
import Component from '@ember/component';

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


This is essentially equivalent to:

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

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

---
_Source: https://npm.io/package/ember-ref-modifier · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._