Message from JavaScript discussions

July 2017

— Great for valid HTML5



// Initialize an instance of cdaTemplate.

var loader = new cdaTemplate();

// Add a custom data formatter.

// This one returns `input` with all uppercase letters.

loader.addFormatter("myFormatter", input => input.toUpperCase());

// Set up the data source.

var dataSource = {

  myTag: "Hello World!"


// Load the template.

loader.loadTemplate("#myTemplate", "#myContainer", {

  data: dataSource


— Wait, how will it know if the data changes?


<!-- Template Container Element -->

<script id="myTemplate">

  <div data-content-text="myTag" data-content-text-format="myFormatter"></div>


<!-- Destination Element -->

<div id="myContainer"></div>

Message permanent page

— Is it two-way?

— One-way

— So if it changes, you have to run it again, but I am planning on adding a watcher

— Object.observe is coming

— Result, loaded template:

<div id="myContainer">

— ES8

— The jquery-template author has a formatter scheme which I find nasty

— Mine is much simpler by simply targeting the data injector attribute, then followed by -format