Dynamically rendered templates/regions need auto-upgrading.

[Zodiase]

I added this demo to show how dynamically rendered DOM content are not upgraded.

I need to find a way to do batch upgrading when changes to the DOM are detected.

[Zodiase]

Well, currently the workaround is, whenever you expect DOM has been changed, call

componentHandler.upgradeAllRegistered();

or, better if you know exactly what's new, use componentHandler.upgradeElement.

However it's important to only upgrade when you know that the changes are effective.
For example, the following code won't work.

// Using Iron:Router
route.render('home');
componentHandler.upgradeAllRegistered(); // Won't work because the rendering job is not done yet.

[Zodiase]

Commit 7b763fd added a patch for calling auto-upgrade whenever a change is detected in DOM.

It uses MutationObserver which is not compatible with old browsers. If MutationObserver is not available, it falls back to the old approach, which still has bugs.

I'm not satisfied with the current implementation's efficiency; calling componentHandler.upgradeAllRegistered() scans the whole DOM which is not necessary. I'm new to MutationObserver so I'll see if I could narrow the scan down.

[ojenksdev]

Having issues with updating the DOM automatically using FlowRouter. Seems to break every time. Should componentHandler.upgradeAllRegistered() be added after each route?

ie:

FlowRouter.route('/', {
    action: function() {
      BlazeLayout.render("mainLayout", {header: "homeHeader", content: "homeContent"});
      componentHandler.upgradeAllRegistered();  //<-- add this here? 
    }
});

First time implementing mdl with meteor, so any advice would help!

Thanks!

[Zodiase]

@ojenksdev Thanks for reporting this. Could you fire a new issue for this? This issue is not intended to cover every upgrading issues but only the generic ones in Meteor. In the new issue, it would also be very helpful to provide the steps to reproduce the errors you are experiencing and what packages and what versions you are using.

[a-vasyliev]

I guess I have same issue. I have table with data, it gets updated "on the fly" via live query, but new table records appears without checkboxes (added by JS part of MDL).. How to force it to redraw?

[Zodiase]

Hi @a-vasyliev if you are talking about the table row checkboxes, check out issue #10.

[a-vasyliev]

@Zodiase Thank you!