Template
The Template Component Part allow components to render their HTML content using a tiny domain-specific language, called the Modulo Templating Language.
Without a Template Component Part (or equivalent custom code), the default behavior of
the Component Component Part is to make no attempt to alter their contents. However,
most components require complicated HTML structures within them. This is where
Templates come into play: They generate the innerHTML of a component.
Templates are not DOM-based, but instead render synchronously to a String
during the render lifecycle phase, and
store the results in renderObj.component.innerHTML. The Component Component Part
will read this HTML code during the reconcile phase and then "reconcile",
modify it's contents to resemble the target innerHTML. (More on this is in the
Component Component Part documentation above.)
Every time a Component renders, the Template will render using the renderObj as a "template context", or, in other words, using the various Component Part's contributions to the renderObj as Template variables that can be inserted into the HTML.
Templating reference
Example Usage
Example #1: Simple template
Example #2: Complex template
Example #3: Multiple templates with include
Note that in a full example, you might consider loading all or some Templates
using a -src= attribute, so you can edit the HTML files separately.
Also note that in mutli-template components, one should have no name (or have active:=true).
Example #4: Multiple templates, chosen with slider
Example #4: Style templates
By defining a <style Template>, can use the Modulo templating language to
apply "templating" to CSS:
Note the following two unusual aspects of this example. Both of these are optional, but only intended to make the Component Part easier to read, and for editors to automatically apply syntax highlighting as expected.
Observe how in the example below we use
-filter-content=in order to "trim" away our placeholder CSS (x { ... }). This makes editing this Template Component Part easier to read, since it will follow standard<style>syntax rule, thus thexjust functioning as a purely cosmetic placeholder element.Observe how we use this dual tag format (
<style Template>). To Modulo, this is the same as doing<Template>. However, using astyletag makes it easier to read, and syntax highlighting will work automatically. Thus, in this case we can use the Modulo feature that lets the first attribute instead determine the Component Part name instead of the actual tag name.