Ember Mutation Observer Mixin and Component
npm install ember-mutation-observerThis README outlines the details of collaborating on this Ember addon.
* ember install ember-mutation-observer
Can be used as a component like this:
``handlebars`
{{#mutation-observer subtree=true childList=true characterData=true on-mutations=(action 'listMutations')}}
{{#each list as |item|}}
{{/each}}
{{/mutations}}
Which will pass the MutationEvents to your given function, once your list will be updated or reordered. This obviously makes the most sense when you don't have access to the given data (ex. some jQuery plugin).
Or used as a Ember.Mixin for your own components:
`javascript
import Component from "@ember/component";
import { computed } from "@ember/object";
import MutationObserverMixin from "ember-mutation-observer/mixins/mutation-observer";
/**
* My Component
*
* @class MyComponent
* @extends Ember.Component
* @uses EmberMutationObserver.MutationObserverMixin
* @public
*/
export default Component.extend(MutationObserverMixin, {
/**
* Mutation observer config
*
* NOTE: At the very least, childList, attributes, or characterData must be
* set to true. Otherwise, "An invalid or illegal string was specified"
* error is thrown.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit
* @property {Object} mutationObserverConfig
* @public
*/
mutationObserverConfig: computed(() => {
return {
// Set to true if additions and removals of the target node's child
// elements (including text nodes) are to be observed.
childList: true,
// Set to true if mutations to target's attributes are to be observed.
attributes: false,
// Set to true if mutations to target's data are to be observed.
characterData: true,
// Set to true if mutations to not just target, but also target's
// descendants are to be observed.
subtree: true,
// Set to true if attributes is set to true and target's attribute
// value before the mutation needs to be recorded.
attributeOldValue: false,
// Set to true if characterData is set to true and target's data
// before the mutation needs to be recorded.
characterDataOldValue: false,
// Set to an array of attribute local names (without namespace) if not
// all attribute mutations need to be observed.
attributeFilter: undefined
};
}),
/**
* Actions of MyComponent
*
* @property {Object}
* @public
*/
actions: {
/**
* Triggered mutation actions
*
* @method actions.mutations
* @param {MutationRecord[]} mutationRecords The triggered mutation records
* @return {void}
* @public
*/
mutations(mutationRecords) {
// Do something with mutation records
}
}
});
`
* git clone this repositoryyarn
*
* ember server
* Visit your app at http://localhost:4200.
* yarn test (Runs ember try:testall to test your addon against multiple Ember versions)ember test
*
*
* ember build`
For more information on using ember-cli, visit http://www.ember-cli.com/.