Message from JavaScript discussions

July 2017

— Ahh, using the data-x="..." attributes?


You can do the exact same operation with a loop outside the class, but if you do there is some additional overhead

— Yes

— Nice

— 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


Message permanent page

— 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