Details about Nunjucks templating system?

[j.e.f.f]

I’m really excited to start using the templating system for my modules, but the Hello World example is not really detailed enough to learn from. For example, when new data is available, how does the template get updated? Is it automatic whenever its data model is updated? Is it triggered manually through an equivalent to the updateDom() function?

Has anyone started using the templating system? Is there any documentation available aside from docs specifically for Nunjucks? Are there any gotchas I should know about?

Thanks!

• Jeff

[strawberry 3.141]

@j.e.f.f I didn’t had a look yet, but maybe you want to have a look into the refactor of the weather modules where the nunjuck idea was born https://github.com/MichMich/MagicMirror/tree/weather-refactor/modules/default/weather

[j.e.f.f]

@strawberry-3.141 I ended up just diving in and figuring it out. I spent some time rewriting MMM-MyCalendar to use the Nunjucks templating system. Here’s what I’ve learned:

• The screen update is triggered using the updateDom() function, just like other modules
• When updateDom() is called, so is getTemplateData() which refreshes the data model provided to the template
• The screen often seems to physically update even if the DOM contents have not changed, which is different behaviour from modules using the old getDom() routine. I’m wondering if Nunjucks injects something into the template that makes each update distinctly different in the markup…
• Updates on the screen seem to take a second or so longer than the old way of doing things. A screen update will result in a moment of black even if you have not specified a fade duration (i.e. updateDom() vs updateDom(200))

Generally I really like the templating system. Makes tweaking the UI so much easier than wading through a bunch of document.createElement statements. If you’ve used Nunjucks before you’ll feel right at home and wonder what took so long for this feature to be implemented

Just to give you an idea of what to expect, here is what the template looks like for MMM-MyCalendar now. Much less code and way easier to read.