Rendering Component

There are two main approaches to rendering your component. Procedurally generating a Dom object with getDom, or using the built in Nunjucks templating engine.

With both approaches, rendering is first triggered when the module is first loaded. When your module's data changes, you can call this.updateDom() to trigger a re-render.

Using getDom

The getDom method is called by MagicMirror whenever it needs to update information on the screen. This method should return an HTML Element which contains all the information you would like to display.

Example:

getDom: function() {
	const wrapper = document.createElement("div");
	wrapper.innerHTML = 'Hello world!';
	return wrapper;
}

Using Nunjucks Templates

If getDom is not overridden, MagicMirror will try and render a Nunjucks template from getTemplate.

Nunjucks is a templating language for JavaScript. You can read more about the syntax in the Nunjucks Documentation.

Templates and Data

Templates are rendered by calling getTemplate to get the path to the template and getTemplateData to get the data used in the template.

Example:

MMM-MyModule.js

getTemplate: function() {
  return "MMM-MyModule.njk";
},

getTemplateData: function() {
  return {
    list: ["item 1", "item 2", "item 3"],
  };
}

MMM-MyModule.njk

<ul>
  {% for item in list %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>

Rendered HTML:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Filters

Nunjucks Filters are functions added to Nunjucks that can be applied to variables passed to the template.

translate filter

MagicMirror provides a translate filter which can be used to access the same functionality available in the this.translate module instance method.

{{ "INFO" | translate }}

Adding filters

You can add your own filters by accessing the Nunjucks environment via this.nunjucksEnvironment()

this.nunjucksEnvironment().addFilter("space", function (str) {
  return str.split("").join(" ");
});

For filter examples see the weather module.