1 / 19

Micro Templates for Javascript

Micro Templates for Javascript. Norman White. Background. S eparate HTML code from data Provide a flexible reusable template to generate html with embedded data Reduce the amount of code that needs to be written Provide ability to develop standard templates for web applications

benny
Download Presentation

Micro Templates for Javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Micro Templates for Javascript Norman White

  2. Background • Separate HTML code from data • Provide a flexible reusable template to generate html with embedded data • Reduce the amount of code that needs to be written • Provide ability to develop standard templates for web applications • Original article • http://ejohn.org/blog/javascript-micro-templating/

  3. Original MicroTemplate • // Simple JavaScript Templating// John Resig - http://ejohn.org/ - MIT Licensed(function(){var cache = {};this.tmpl = functiontmpl(str, data){// Figure out if we're getting a template, or if we need to// load the template - and be sure to cache the result.var fn = !/\W/.test(str) ?      cache[str] = cache[str] ||tmpl(document.getElementById(str).innerHTML) :// Generate a reusable function that will serve as a template// generator (and which will be cached).newFunction("obj","var p=[],print=function(){p.push.apply(p,arguments);};" +// Introduce the data as local variables using with(){}"with(obj){p.push('" +// Convert the template into pure JavaScriptstr          .replace(/[\r\t\n]/g, " ")          .split("<%").join("\t")          .replace(/((^|%>)[^\t]*)'/g, "$1\r")          .replace(/\t=(.*?)%>/g, "',$1,'")          .split("\t").join("');")          .split("%>").join("p.push('")          .split("\r").join("\\'")      + "');}return p.join('');");    // Provide some basic currying to the user    return data ? fn( data ) : fn;  };})();

  4. Tricks that allow micro templates • “Hide” the template definition in a script type that the browsers don’t recognize, then call the micro template function to dynamically fill in the data elements. • Use Javascript’s powerful regular expression facilities to create a tiny templating expansion function that is passed a template and data, and generates an html string that can then be used somewhere. • You can precompile the templating function for performance.

  5. Example Template • <script type="text/html" id="item_tmpl"><div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">    <div class="grid_1 alpha right">      <img class="righted" src="<%=profile_image_url%>"/></div><div class="grid_6 omega contents"><p><b><ahref="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>    </div>  </div></script>

  6. Example Template NAME • <script type="text/html" id="item_tmpl"><div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">    <div class="grid_1 alpha right">      <img class="righted" src="<%=profile_image_url%>"/></div><div class="grid_6 omega contents"><p><b><ahref="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>    </div>  </div></script>

  7. Example Template Data Element • <script type="text/html" id="item_tmpl"><div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">    <div class="grid_1 alpha right">      <img class="righted" src="<%=profile_image_url%>"/></div><div class="grid_6 omega contents"><p><b><ahref="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>    </div>  </div></script>

  8. Usage var results = document.getElementById("results");results.innerHTML = tmpl("item_tmpl", dataObject); QUESTION: What is in “dataObject” ?

  9. Many micro templates now • Jquery Templates • Mustache • Pure • Mootools • Whiskers • …

  10. MustachePopular micro templateUsed in Dreamweaver examples • “Logic-less” • No if, else, for , … • 300 lines of Javascript code • Works in python, ruby or javascript • Can run on server side or browser

  11. Typical Template Hello {{name}} You have just won ${{value}}! {{#in_ca}} Well, ${{taxed_value}}, after taxes. {{/in_ca}}

  12. Data Object { "name": "Chris", "value": 10000, "taxed_value": 10000 - (10000 * 0.4), "in_ca": true }

  13. Result Hello Chris You have just won $10000! Well, $6000.0, after taxes.

  14. Usage Mustache only uses “tags”, no logic Tag Types Variables {{name}} {{{name}}} (unescape html) Sections – renders blocks of text one or more times {{#person}} …. {{/person}} Lambdas – Callable objects, i.e. functions

  15. Some Mustache Examples Template {{name}} {{age}} {{company}} {{{company}}} Hash (input data) { “name”: “Chris”, “company”: “<b>GitHub</b>” { Output Chris &lt;b&gt;GitHub&lt;/b&gt; <b>GitHub</b>

  16. Lists(Note automatic iteration) Template: • {{#repo}} • <b>{{name}}</b> • {{/repo}} Hash: { "repo": [ { "name": "resque" }, { "name": "hub" }, { "name": "rip" }, ] } Output: <b>resque</b> <b>hub</b> <b>rip</b>

  17. Lambdas • Template: • {{#wrapped}} • {{name}} is awesome. • {{/wrapped}} • Hash: • { • "name": "Willy", • "wrapped": function() { • return function(text) { • return "<b>" + render(text) + "</b>" } • } • } • Output: • <b>Willy is awesome.</b>

  18. Invoking MustacheJust call Mustache.render(template, data) • Include mustache.js • var view = { • title: "Joe", • calc: function () { • return 2 + 4; • } • }; • var output = Mustache.render("{{title}} spends {{calc}}", view); • Output = “Joe spends 6”

  19. Typical Uses • Get data from server as a JSON string • Decode JSON data and pass to a mustache template to display. • Many examples of Mustache on-line

More Related