Commit 4bf6bfeb authored by S Anand's avatar S Anand
Browse files

REF: Use options as $.template()'s second parameter

parent 99318a5d
......@@ -132,13 +132,17 @@ using as `.template({var1: value, var2: value, ...})`. For example:
To re-render the template, run `.template(data)` again with different data.
To re-use the template, i.e. render the same template on a different DOM node, run `.template(data, target)`. This allows you to declare templates once and apply them across the body. For example:
## $.template options
To re-use the template, i.e. 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:
```js
$('script.chart')
.template({heading: 'Dashboard 1'}, '.dashboard1')
.template({heading: 'Dashboard 2'}, '.dashboard2')
.template({}, '.no-heading')
.template({heading: 'Dashboard 1'}, {target: '.dashboard1'})
.template({heading: 'Dashboard 2'}, {target: '.dashboard2'})
.template({}, {target: '.no-heading'})
```
## $.template attributes
......
......@@ -10,16 +10,21 @@ var _renderer = 'template.render',
// - stores the target node in $this.data('template.target')
// - triggers a template event (with .templatedata, .target)
// - returns the target node
function make_template($this, html, data, default_target) {
function make_template($this, html, data, default_options) {
var template = _.template(html)
var $target
function renderer(data, target) {
if (!default_options)
default_options = {}
function renderer(data, 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)))
if (typeof target == 'undefined')
target = default_target
if (typeof target == 'undefined') {
// 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)
} else {
// Clear old target nodes if any
var $old_target = $this.data(_target)
if ($old_target)
......@@ -27,8 +32,6 @@ function make_template($this, html, data, default_target) {
// Store the target nodes for future reference
$this.after($target)
.data(_target, $target)
} else {
$(target).html($target)
}
// Trigger the template event
$this.trigger({type: 'template', templatedata: data, target: $target})
......@@ -38,7 +41,7 @@ function make_template($this, html, data, default_target) {
return renderer(data)
}
export function template(data, target) {
export function template(data, options) {
var selector = this.data('selector') || 'script[type="text/html"]'
// Pre-create the template rendering function
......@@ -53,16 +56,16 @@ export function template(data, target) {
// If the AJAX load succeeds, render the loaded template
// Else render the contents, with an additional xhr variable
$.get(src)
.done(function(html) { make_template($this, html, data, target) })
.done(function(html) { make_template($this, html, data, options) })
.fail(function(xhr) {
make_template($this, $this.html(), _.extend({xhr: xhr}, data, target))
make_template($this, $this.html(), _.extend({xhr: xhr}, data, options))
})
} else
// If no src= is specified, just render the contents
make_template($this, $this.html(), data, target)
make_template($this, $this.html(), data, options)
} else
// If the renderer is already present, just use it
renderer(data, target)
renderer(data, options)
})
return this
}
......@@ -96,13 +96,13 @@
t.equal(text(e.target), 'Dashboard 1', 'renders with data')
t.equal(strip($('.dashboard1').html()), 'Dashboard 1', 'renders to target')
})
.template({ heading: 'Dashboard 1' }, '.dashboard1')
.template({ heading: 'Dashboard 1' }, {target: '.dashboard1'})
.one('template', function (e) {
t.equal(text(e.target), 'Dashboard 2')
t.equal(strip($('.dashboard2').html()), 'Dashboard 2', 'renders to target')
t.end()
})
.template({ heading: 'Dashboard 2' }, '.dashboard2')
.template({ heading: 'Dashboard 2' }, {target: '.dashboard2'})
})
</script>
......
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