manageBehaviors

🚨Deprecation notice🚨

Q3 of 2019 this will be removed from a17-helpers. manageBehaviors is so specific to the A17 method of triggering and writing behaviors that its being updated and moved into A17 Boilerplate where it can sit with its new counterpart createBehavior.

description

Hunts through the page to set up any data-behaviors, listens for new content and page updated events to init any new data-behaviors and destroy any data-behaviors on elements that have been removed.

requires

• nothing

parameters

• none

returns

• nothing

example usage:

In a DOMContentLoaded function:

document.addEventListener('DOMContentLoaded', function(){
  manageBehaviors();
});

The default init listens for event page:updated which will look at the list of A17.activeBehaviors and check the related elements are still in the document. If not, it triggers the behaviors' destroy functions. And then it checks for new data-behaviors and inits them.

IMPORTANT Don't insert content with node.innerHTML += newHTML - use appendChild or insertAdjacentHTML. These methods insert new DOM nodes or insert new HTML where as innerHTML rewrites and replaces all the DOM nodes with in node, which will break tracking active behaviors.

Alternatively if you're working with spf.js, you slightly change how you init manageBehaviors:

manageBehaviors({pageUpdatedEventName:'spfdone'});

Or, with pjax:

manageBehaviors({pageUpdatedEventName:'pjax:end'});

It also listens for content:updated, which looks at the page for new data-behaviors and inits them - it doesn't trigger any destroy methods.

You can also specify where it should look:

triggerCustomEvent(document, 'content:updated', { el: node });

Where node is the element into which new content has been dropped.