Version 2.0.0: Collections
This new major version can still render single-recordset data. The container syntax is changed to use the mt-container
tag (instead of a span
or div
):
<mt-container mt-records="curators" mt-template="person"></mt-container>
This version simplifies syntax for header containers, and adds support for collections of related recordsets. For example, data may be structured like this (this shows structure only, not how the records would be typed into the page):
Advisers (collection)
- Product Management (recordset)
- Joe Smith
- Sue Green
- Doc Brown
- Engineering (recordset)
- Fred Banes
- Graphic Design (recordset)
- Sally Bree
- Jeff Ward
Team (collection)
- Managers (recordset)
- Jack Waters
- Dave Cutterhand
- Missy Elliot
- Designers (recordset)
- Sam Spade
- Jeff Winger
As shown above, the new system supports multiple collections, in this case "Advisers" and "Team". Each collection can use totally different templates.
A collection may be rendered similar to the following, where each recordset within the collection can be rendered with it's own HTML header, as this image shows:
The placeholder inside the page body will be written as follows. This container can produce the entire page of multiple recordsets, each with a separate header.
<mt-container mt-collection="advisers" mt-template="people"></mt-container>
mt.js knows this is a collection of recordsets, rather than a single recordset, by the presence of the mt-collection
attribute. The recordsets are indicated by the mt-collection
attribute. The header template is given in the mt-template
attribute.
The dev would create two templates: a header template and a record template. The header template contains a placeholder to the record template.
<mt-templates>
<!-- HEADER TEMPLATE -->
<template id="people">
<h2>[[TITLE]]</h2>
<!-- PLACEHOLDER FOR RECORD TEMPLATE -->
<mt-container mt-records="[[id]]" mt-template="person"></mt-container>
</template>
<!-- RECORD TEMPLATE -->
<template id="person">
<h3>Person: {{NAME}}</h3>
<a href="{{LINK}}">{{LINK}}</a>
</template>
</mt-templates>
As seen above, the header can display meta information about the recordset, eg [[TITLE]]. Double-square brackets indicate meta info about the recordset. As with the previous version of this tool, double-curly braces indicate per-record data.
Records would be stored similar to the following. To minimize typing, the field-names are stated only once, instead of being repeated on every recordset. A collection of related recordsets are grouped inside a collection tag. The collection tag indicates which field-schema to use for all the recordsets inside the collection.
<mt-recordsets hidden>
<!-- SCHEMA -->
<mt-fields id="team-member-fields">
NAME
TITLE
IMG
</mt-fields>
<!-- COLLECTION -->
<mt-collection id="advisers" mt-fields="team-member-fields">
<!-- RECORDSET -->
<mt-records id="product" mt-meta="TITLE: Product Management">
Lana Hogue
Supply Chain Guru
lana-hogue.jpg
Faran Thomason
Videogame Producer
faran.jpg
</mt-records>
<!-- RECORDSET -->
<mt-records id="lab" mt-meta="TITLE: Mobile Lab">
Eugene Korsunskiy
Education Engineer
eugene-crop-sm.jpg
Jason Martin
STEM Entrepreneur
jason-martin.jpg
</mt-records>
</mt-collection>
</mt-recordsets>