Material-design-lite: Reload / init javascript behaviors

[mpastas]

Hi guys,

Is there any way to reload / init the javascript behaviors over new elements within the DOM ? I'm trying to init MaterialMenu component in particular.

Thanks.
Mario

[eKoopmans]

Hi @mpastas, the componentHandler is the tool that you're looking for - it upgrades components to give them JS behaviours. This wiki article briefly describes how the Component Handler works, but it doesn't list all of the available methods.

I've made a table of componentHandler methods below. I recommend using upgradeElement for single elements, and upgradeElements for multiple elements (upgradeElements will also search descendants and upgrade any with a registered JS class). Here's an example usage:

// This will upgrade all descendants that have js classes, i.e. 'mdl-js-menu'
var element = document.getElementById('myContainerWithNewElements');
componentHandler.upgradeElements(element);

| componentHandler Method | Argument type(s) | Description |
|-------------------------------------|------------------|-------------|
| upgradeDom(optJsClass, optCssClass) | string, string | Searches existing DOM for elements of our component type and upgrades them if they have not already been upgraded. |
| upgradeElement(element, optJsClass) | Element, string | Upgrades a specific element rather than all in the DOM. |
| upgradeElements(elements) | Element / Array / NodeList / HTMLCollection | Upgrades a specific list of elements rather than all in the DOM. |
| upgradeAllRegistered() | | Upgrades all registered components found in the current DOM. This is automatically called on window load. |

[iHTCboy]

@eKoopmans Thanks! 💯