Message from JavaScript discussions

July 2017

— Great for valid HTML5

— 

JavaScript

// 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>

</script>


<!-- 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">
<div>
HELLO WORLD!
</div>
</div>

— 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