Commit 5076c788 authored by S Anand's avatar S Anand
Browse files

ENH: $.template supports list creation. Fixes #115

parent 84b4ba06
Pipeline #68406 passed with stage
in 2 minutes and 16 seconds
......@@ -920,7 +920,7 @@ To re-render the template, run `.template(data)` again with different data.
### $.template options
To re-use the template, i.e. render the same template on a different DOM node,
To re-use the template or render the same template on a different DOM node,
run `.template(data, {target: selector})`. This allows you to declare templates
once and apply them across the body. For example:
......@@ -931,6 +931,35 @@ $('script.chart')
.template({}, {target: '.no-heading'})
The target can also be specified via a `data-target=".dashboard1"` on the script
template. This is the same as specifying `{target: '.dashboard'}`. For example:
<script class="chart" data-target=".dashboard1">...</script>
<script class="chart" data-target=".dashboard2">...</script>
To append instead of replacing, run `.template(data, {append: true})`. Every
time `.template` is called, it appends rather than replaces. For example:
.template({heading: 'Item 1'}, {append: true}), // Appends the heading
.template({heading: 'Item 2'}, {append: true}), // instead of replacing it
You can also specify this as `<script data-append="true">`. This helps append to
an existing target. For example:
<script class="list" data-append="true" data-target=".existing-list">...</script>
<ul class="existing list">
<li>Existing item</li>
<!-- Every time .template() is called, the result is added as a list item here -->
### $.template attributes
Template containers can have an `src=` attribute that loads the template from a file:
......@@ -6,7 +6,7 @@ var _renderer = 'template.render',
// Bind a template renderer to the node $'template.render')
// The _renderer function
// - runs the html template, parses the result, and create a target node
// - appends the target node after $this (clearing any previous target nodess)
// - appends the target node after $this (clearing any previous target nodes)
// - stores the target node in $'')
// - triggers a template event (with .templatedata, .target)
// - returns the target node
......@@ -19,19 +19,26 @@ function make_template($this, html, data, default_options) {
// Parse the template output and create a node collection
// $.parseHTML ensures that "hello" is parsed as HTML, not a selector
$target = $($.parseHTML(template(data)))
// Get options. DOM over-rides JS options
var append = $'append') || (options ? options.append : default_options.append)
var target = $'target') || (options ? :
// Render into target node if specified
// Else, render immediately after source node
var target = options ? :
if (typeof target != 'undefined') {
if (append)
} else {
// Clear old target nodes if any
var $old_target = $
if ($old_target)
// Add the target HTML. "before" ensures that future appends are one below the other
// Store the target nodes for future reference
.data(_target, $target)
if (!append)
$, $target)
// Trigger the template event
$this.trigger({type: 'template', templatedata: data, target: $target})
......@@ -4,7 +4,7 @@
<title>template tests</title>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/lodash/lodash.min.js"></script>
<script src="../dist/template.min.js"></script>
<script src="../dist/g1.js"></script>
<script src="tape.js"></script>
......@@ -126,13 +126,63 @@
<script type="text/html" class="template"><div class="result"><%= 2 + 2 %></div></script>
tape('$().template() accepts data-selector to select sub-elements', function(t) {
// The second tempalte (with .template) is triggered, not the first one
tape('$().template() accepts data-selector to select sub-elements', function (t) {
// The second template (with .template) is triggered, not the first one
$('.root2').on('template', function (e) {
t.equal('.result').text(), '4')
<script class="target-dom" data-target=".target1" type="text/html">1 + 1 = <%= 1 + 1 %></script>
<script class="target-dom" type="text/html">2 + 2 = <%= 2 + 2 %></script>
<div class="target1"></div>
<div class="target2"></div>
tape('$().template() data-target specifies target, overrides {target:...}', function (t) {
var count = 0
// Wait for both templates to be done. Then check if the text has changed
$('').on('template', function (e) {
if (count == 2) {
t.equal($('.target1').text(), '1 + 1 = 2')
t.equal($('.target2').text(), '2 + 2 = 4')
}).template({}, { target: '.target2' })
<script class="append-dom" data-append="true" type="text/html"><span class="appended-dom"><%= n %></span></script>
<script class="append-dom" data-append="true" data-target=".append-dom-target" type="text/html"><span class="appended-dom-target"><%= n %></span></script>
<div class="append-dom-target"></div>
tape('$().template() with data-append="true" appends data to target', function (t) {
var count = 5
for (var i = 0; i < count; i++) {
$('script.append-dom').template({ n: i }, {append: false})
t.equal($('.appended-dom').length, count)
t.equal($('.append-dom-target .appended-dom-target').length, count)
<script class="append-js" type="text/html"><span class="appended-js"><%= n %></span></script>
<script class="append-js" data-target=".append-js-target" type="text/html"><span class="appended-js-target"><%= n %></span></script>
<div class="append-js-target"></div>
tape('$().template() with {append:true} option appends data to target', function (t) {
var count = 5
for (var i = 0; i < count; i++) {
$('script.append-js').template({ n: i }, {append: true})
t.equal($('.appended-js').length, count)
t.equal($('.append-js-target .appended-js-target').length, count)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment