Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lifeart/ember-ref-modifier
Ember Ref Modifier
https://github.com/lifeart/ember-ref-modifier
ember ember-addon ember-addons modifier
Last synced: about 2 months ago
JSON representation
Ember Ref Modifier
- Host: GitHub
- URL: https://github.com/lifeart/ember-ref-modifier
- Owner: lifeart
- License: mit
- Archived: true
- Created: 2019-02-19T22:55:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-11T19:52:48.000Z (almost 4 years ago)
- Last Synced: 2024-07-19T00:10:25.111Z (2 months ago)
- Topics: ember, ember-addon, ember-addons, modifier
- Language: JavaScript
- Size: 1.15 MB
- Stars: 44
- Watchers: 3
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-ref-modifier - An implementation of the `{{ref}}` element modifier. (Packages / Modifiers)
README
# ember-ref-modifier
[](https://greenkeeper.io/)
------------
## Check [ember-ref-bucket](https://github.com/lifeart/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](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
Click me baby, one more time!
{{this.button.dataset.name}} >> "foo"
```
--------------------------
```hbs
Click me baby, one more time!
```
```js
class Component {
@action callback(node) {
this.node = node;
}
}
```
------------------------
```hbs
{{#-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|}}
Enter your name
{{/let}}
```
------------------------
------
```hbs
Click me baby, one more time!
```
```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.