Naive Puppets Marching

    ember-cli-mutation-observer

    0.1.5 • Public • Published

    Build Status Ember Observer Score npm version

    ember-cli-Mutation-Observer

    The easiest way to subscribe to Dom changes in your ember components

    A lightweight ember addon that provides a event based solution for react when the DOM of your components change. It uses MutationObserver to make magic happen. DEMO

    Installation

    Ember Cli Mutation Observer works in Ember 1.13.9+ or 2.0+, including beta and canary, with no deprecations whatsoever.

    As any other ember-cli addon, run:

    ember install ember-cli-mutation-observer
    

    Using it as a Mixin

    /app/components/dummy-list.js

     
    import Ember from 'ember';
    import mutationObserver from '../mixins/mutation-observer';
     
    export default Ember.Component.extend(mutationObserver, {
     
      onMutation(mutations, observer) {
     
        mutations.forEach(function(mutation) {
          console.log(mutation.type, mutation.oldValue);
     
          mutation.addedNodes.forEach(function(record) {
            console.log(record);
          });
        });    
        
        //Access to observer methods
        observer.takeRecords();
      }
    });
     

    You will see something like this for each mutation:

    You can also specify the mutation options you want:

    export default Ember.Component.extend(mutationObserver, {
      mutationConfig: {
        attributes: true,
        childList: true,
        characterData: true
      }
    })

    Use it in all your components

    If you want to have the functionality available in all your components just set the mutationObserverInjection flag to true in your environment.

    Check this environment example

    Browser support

    http://caniuse.com/#feat=mutationobserver

    Install

    npm i ember-cli-mutation-observer

    DownloadsWeekly Downloads

    0

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • davidgovea
    • zzarcon