Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 9 deletions
README.md
View file @ 5076c788
......@@ -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:
```html
<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:
```js
$('script.list')
.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:
```html
<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 -->
</ul>
```
### $.template attributes
Template containers can have an `src=` attribute that loads the template from a file:
......
src/template.js
View file @ 5076c788
......@@ -6,7 +6,7 @@ var _renderer = 'template.render',
// Bind a template renderer to the node $this.data('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 $this.data('template.target')
// - 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 = $this.data('append') || (options ? options.append : default_options.append)
var target = $this.data('target') || (options ? options.target : default_options.target)
// Render into target node if specified
// Else, render immediately after source node
var target = options ? options.target : default_options.target
if (typeof target != 'undefined') {
$(target).html($target)
if (append)
$(target).append($target)
else
$(target).html($target)
} else {
// Clear old target nodes if any
var $old_target = $this.data(_target)
if ($old_target)
$old_target.remove()
// Add the target HTML. "before" ensures that future appends are one below the other
$this.before($target)
// Store the target nodes for future reference
$this.after($target)
.data(_target, $target)
if (!append)
$this.data(_target, $target)
}
// Trigger the template event
$this.trigger({type: 'template', templatedata: data, target: $target})
......
test/test-template.html
View file @ 5076c788
......@@ -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>
</head>
<body>
......@@ -126,13 +126,63 @@
<script type="text/html" class="template"><div class="result"><%= 2 + 2 %></div></script>
</section>
<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(e.target.filter('.result').text(), '4')
t.end()
}).template()
})
</script>
<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>
<script>
tape('$().template() data-target specifies target, overrides {target:...}', function (t) {
t.plan(2)
var count = 0
// Wait for both templates to be done. Then check if the text has changed
$('script.target-dom').on('template', function (e) {
count++
if (count == 2) {
t.equal($('.target1').text(), '1 + 1 = 2')
t.equal($('.target2').text(), '2 + 2 = 4')
}
}).template({}, { target: '.target2' })
})
</script>
<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>
<script>
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)
t.end()
})
</script>
<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>
<script>
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)
t.end()
})
</script>
</body>
</html>
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