Skip to content

Version 2.0.0: Collections

Compare
Choose a tag to compare
@johnaweiss johnaweiss released this 29 Dec 21:06
· 10 commits to main since this release
15f1c6b

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:

image

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>