Noodle Printing Machine

    ember-ref-modifier

    1.0.1 • Public • Published

    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 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.

    Install

    npm i ember-ref-modifier

    DownloadsWeekly Downloads

    5,324

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    8.81 kB

    Total Files

    10

    Last publish

    Collaborators

    • lifeart