JavaScript templates

  • Revision slug: JavaScript_templates
  • Revision title: JavaScript templates
  • Revision id: 303529
  • Created:
  • Creator: Brettz9
  • Is current revision? No
  • Comment

Revision Content

An alternative approach to XUL's own templating system, is to use JavaScript templates.

This approach also provides a separation of formatting and structure from content, but relies on a JavaScript templating engine to have JavaScript-side business logic inject content into a template. And this does not require any use of RDF/XML, etc.

By syntax style

100% Standards-based (no custom syntax)

Pure JavaScript (JavaScript function calls generate HTML)

Pure HTML (JavaScript selectors in business logic find normal HTML to populate)

XSL

  • XSLTJS (for cross-browser use of XSL for templates

E4X

Standards-friendly (custom attributes or embedding syntax, but uses mostly standard approach)

X/HTML/E4X with Namespaced custom attributes and elements

Pure JavaScript embedded within HTML/XML design logic (ASP/JSP/PHP or curly braces style)

Custom approach

HTML+Curly braces {} with custom design logic

HTML + Non-namespaced custom elements or attributes

ASP/JSP-style custom design logic within <%...%>

Revision Source

<p>An alternative approach to XUL's own templating system, is to use JavaScript templates.</p>
<p>This approach also provides a separation of formatting and structure from content, but relies on a JavaScript templating engine to have JavaScript-side business logic inject content into a template. And this does not require any use of RDF/XML, etc.</p>
<h2 id="By_syntax_style"><strong>By syntax style</strong></h2>
<h3 id="100.25_Standards-based_(no_custom_syntax)">100% Standards-based (no custom syntax)</h3>
<h4 id="Pure_JavaScript_(JavaScript_function_calls_generate_HTML)">Pure JavaScript (JavaScript function calls generate HTML)</h4>
<ul>
  <li><a class="external" href="http://vflash.ru/rr2jquery/?mdc" title="http://vflash.ru/rr2jquery/?mdc">domMaster</a><span class="external"> and nodejs <a class="link-https" href="https://github.com/flash/master_texthtml" title="https://github.com/flash/master_texthtml">master_texthtml</a></span></li>
  <li><a class="external" href="http://mte.null-tech.com/">Mootools Template Engine</a> (null-tech.com)</li>
</ul>
<h4 id="Pure_HTML_(JavaScript_selectors_in_business_logic_find_normal_HTML_to_populate)">Pure HTML (JavaScript selectors in business logic find normal HTML to populate)</h4>
<ul>
  <li><a class="external" href="http://beebole.com/pure/">PURE</a></li>
  <li><a class="link-https" href="https://github.com/janl/mustache.js" title="https://github.com/janl/mustache.js">mustache</a> (has some design logic, but brief syntax)</li>
  <li><a class="external" href="http://wiki.github.com/raid-ox/chain.js">Chain.js</a> (dead link); <a href="http://samuelmueller.com/2008/10/client-side-templates-using-asp-net-jquery-chain-js-and-taffydb" title="http://samuelmueller.com/2008/10/client-side-templates-using-asp-net-jquery-chain-js-and-taffydb">explained here</a></li>
  <li><a href="http://www.projectrecon.net/LightningDOM/Playground.html" title="http://www.projectrecon.net/LightningDOM/Playground.html">LightningDOM</a></li>
  <li><a href="http://zealdev.wordpress.com/2008/02/22/mootools-template-engine-a-new-approach/" title="http://zealdev.wordpress.com/2008/02/22/mootools-template-engine-a-new-approach/">Mootools Template Engine</a> (zealdev.wordpress.com)</li>
</ul>
<h4 id="XSL">XSL</h4>
<ul>
  <li><a class="external" href="http://johannburkard.de/software/xsltjs/">XSLTJS</a> (for cross-browser use of XSL&nbsp;for templates</li>
</ul>
<h4 id="E4X">E4X</h4>
<ul>
  <li><a href="/en/E4X_for_templating" title="En/E4X for templating">E4X for templating</a></li>
</ul>
<h3 id="Standards-friendly_(custom_attributes_or_embedding_syntax.2C_but_uses_standard-approach_or_mostly_standard_approach)">Standards-friendly (custom attributes or embedding syntax, but uses mostly standard approach)</h3>
<h4 id="X.2FHTML.2FE4X_with_Namespaced_custom_attributes_and_elements">X/HTML/E4X with Namespaced custom attributes and elements</h4>
<ul>
  <li><a class="external" href="http://labs.adobe.com/technologies/spry/samples/data_region/AttributeComboSample.html">Adobe Spry processing instruction attributes</a></li>
  <li><a href="http://weblogs.asp.net/bleroy/archive/2008/09/02/using-client-templates-part-2-live-bindings.aspx" title="http://weblogs.asp.net/bleroy/archive/2008/09/02/using-client-templates-part-2-live-bindings.aspx">ASP.NET client templates</a></li>
  <li><a class="external" href="http://github.com/bard/seethrough_js/wikis" title="http://github.com/bard/seethrough_js/wikis">Seethrough</a> (uses <a href="/E4X" title="E4X">E4X</a> with namespaced attributes and elements)</li>
</ul>
<h4 id="Pure_JavaScript_embedded_within_HTML.2FXML_design_logic_(ASP.2FJSP.2FPHP_or_curly_braces_style)">Pure JavaScript embedded within HTML/XML design logic (ASP/JSP/PHP or curly braces style)</h4>
<ul>
  <li><a class="external" href="http://embeddedjs.com/">EJS (Embedded JS)</a></li>
  <li><a class="external" href="http://www.javascriptr.com/2008/06/05/purejstemplate-a-pure-javascript-templating-engine-for-jquery/">PureJSTemplate</a></li>
  <li><a class="external" href="http://code.google.com/p/mjst/" title="http://code.google.com/p/mjst/">mjst</a></li>
</ul>
<h3 id="Custom_approach">Custom approach</h3>
<h4 id="HTML.2BCurly_braces_.7B.7D_with_custom_design_logic">HTML+Curly braces {} with custom design logic</h4>
<ul>
  <li><a href="http://weblogs.asp.net/bleroy/archive/2008/09/02/using-client-templates-part-2-live-bindings.aspx" title="http://weblogs.asp.net/bleroy/archive/2008/09/02/using-client-templates-part-2-live-bindings.aspx">ASP.NET client templates</a></li>
  <li><a class="external" href="http://extjs.com/learn/Tutorial:Getting_Started_with_Templates">Templates in ExtJS</a> (dead link; obtained via <a href="http://web.archive.org/web/20100602135658/http://www.extjs.com/learn/Tutorial:Getting_Started_with_Templates" title="http://web.archive.org/web/20100602135658/http://www.extjs.com/learn/Tutorial:Getting_Started_with_Templates">archive.org</a>)</li>
  <li><a class="external" href="http://code.google.com/p/trimpath/wiki/JavaScriptTemplates">JavaScriptTemplates</a></li>
  <li><a class="external" href="http://code.google.com/p/jsmarty/">JSmarty</a> (a system based apparently more closely on <a class="external" href="http://smarty.php.net/manual/en">Smarty</a>, with many more functions, and with more recent contributions)</li>
  <li><a class="external" href="http://www.balupton.com/sandbox/jquery_smarty/">jQSmarty: jQuery Smarty Plugin</a> (dead link) (introduced <a class="external" href="http://www.phpinsider.com/smarty-forum/viewtopic.php?p=47804">here</a>)</li>
  <li><a class="external" href="http://jsrepeater.devprog.com/">JS Repeater</a></li>
  <li><a href="http://jtemplates.tpython.com/" title="http://jtemplates.tpython.com/">JTemplates</a></li>
  <li><a class="external" href="http://code.google.com/p/mjst/" title="http://code.google.com/p/mjst/">mjst</a></li>
  <li><a class="external" href="http://mjtemplate.org/" title="http://mjtemplate.org/">Mjt</a></li>
  <li><a class="link-https" href="https://github.com/janl/mustache.js" title="https://github.com/janl/mustache.js">mustache</a> (thanks to janl)</li>
  <li><a class="external" href="http://plugins.jquery.com/project/jquerytemplate">Templates in JQuery</a></li>
  <li><a class="external" href="http://www.prototypejs.org/api/template">Templates in Prototype</a></li>
  <li><a class="external" href="http://github.com/gsf/whiskers.js" title="http://github.com/gsf/whiskers.js">Whiskers.js</a></li>
</ul>
<h4 id="HTML_.2B_Non-namespaced_custom_elements_or_attributes">HTML + Non-namespaced custom elements or attributes</h4>
<ul>
  <li><a class="external" href="http://code.google.com/p/mjst/" title="http://code.google.com/p/mjst/">mjst</a></li>
  <li><a class="external" href="http://mjtemplate.org/" title="http://mjtemplate.org/">Mjt</a></li>
</ul>
<h4 id="ASP.2FJSP-style_custom_design_logic_within_&lt;.25....25&gt;">ASP/JSP-style custom design logic within &lt;%...%&gt;</h4>
<ul>
  <li><a class="external" href="http://ejohn.org/blog/javascript-micro-templating/" title="ejohn.org">JavaScript Micro-Templating</a> syntax similar to (asp|jsp|php)</li>
  <li><a class="external" href="http://blog.markturansky.com/BetterJavascriptTemplates.html">BetterJavascriptTemplates</a></li>
  <li><a class="external" href="http://www.javascriptr.com/2008/06/05/purejstemplate-a-pure-javascript-templating-engine-for-jquery/">PureJSTemplate</a></li>
  <li><a class="external" href="http://jsonml.org/BST/">JSONML Browser-Side Templates</a></li>
  <li><a class="link-https" href="https://github.com/mrharel/babajs" title="https://github.com/mrharel/babajs">BabaJS</a></li>
  <li><a class="external" href="http://www.prototypejs.org/api/template">Templates in Prototype</a></li>
</ul>
Revert to this revision