Commit 6e6a643d authored by S Anand's avatar S Anand

BUG: template event.target should be set with data-target

parent 5b3351dc
Pipeline #78827 passed with stage
in 2 minutes and 27 seconds
......@@ -213,7 +213,7 @@ For example:
<script>
$('script.event')
.on('template', function(e) { // When the template is rendered,
$(e.target).find('.data') // find the <pre> tag inside target nodes
e.target.find('.data') // find the .data class inside target nodes
.html(JSON.stringify(e.templatedata)) // and enter the template data
})
.template({x: 1}) // Trigger template AFTER .on('template')
......
......@@ -32,7 +32,7 @@ export function template(data, options) {
}
var _renderer = 'template.render'
var _prev_target = 'template.prev_target'
var _prev_created = 'template.prev_created'
// Bind a template renderer to the node $this.data('template.render')
// This renderer function accepts (data, options) and creates
......@@ -43,7 +43,7 @@ var _prev_target = 'template.prev_target'
// - returns the target node
function make_template($this, html, data, default_options) {
var compiled_template = _.template(html)
var $target
var $created
function renderer(data, options) {
html = compiled_template(data)
// Get options. DOM data-* over-rides JS options
......@@ -54,23 +54,24 @@ function make_template($this, html, data, default_options) {
engine = template.engines[engine] || template.engines['default']
// If we're appending the contents, just add the text
if (append) {
$created = $($.parseHTML(html))
// If we're appending to a target node, just append to it.
if (target)
$(target).append($($.parseHTML(html)))
$(target).append($created)
// If no target node, add BEFORE template. Future appends will be in sequence
else
$this.before($($.parseHTML(html)))
$this.before($created)
}
// If we're not appending, replace the contents using the renderer
else {
// The engine must return the target nodes. See template.engines spec below
$target = engine($this, target, html)
// Store the target nodes for future reference. See template.engines spec below
$this.data(_prev_target, $target)
// The engine must return the created nodes. See template.engines spec below
$created = engine($this, target, html)
// Store the created nodes for future reference. See template.engines spec below
$this.data(_prev_created, $created)
}
// Trigger the template event. Use "templatedata" since ".data" is reserved
$this.trigger({ type: 'template', templatedata: data, target: $target })
return $target
$this.trigger({ type: 'template', templatedata: data, target: $created })
return $created
}
$this.data(_renderer, renderer)
return renderer(data)
......@@ -82,9 +83,9 @@ function make_template($this, html, data, default_options) {
// $this: the <script> element
// target: the target selector or node to render into. May be undefined
// html: the HTML to render at the target (or around $this if target is missing)
// It returns the target nodes created as a jQuery object. This is used in 2 ways:
// It returns the created nodes as a jQuery object. This is used in 2 ways:
// - the template event.target attribute is this return value
// - $this.data(_prev_target) is set to this return value
// - $this.data(_prev_created) is set to this return value
template.engines = {}
// The default engine uses jQuery
......@@ -97,7 +98,7 @@ template.engines['default'] = template.engines['jquery'] = function ($this, targ
$(target).html($target)
else {
// Remove any previous targets and re-create the output
var $oldtarget = $this.data(_prev_target)
var $oldtarget = $this.data(_prev_created)
if ($oldtarget)
$oldtarget.remove()
$this.before($target)
......@@ -108,7 +109,7 @@ template.engines['default'] = template.engines['jquery'] = function ($this, targ
/* globals morphdom */
template.engines['vdom'] = function ($this, target, html) {
// If no target is specified, use the previous target, if any
target = target || $this.data(_prev_target)
target = target || $this.data(_prev_created)
// If a target is specified, wrap the HTML with the target node.
// For example, <div id="target">...</div> will wrap the HTML with
// <div id="target"></div>
......
......@@ -181,16 +181,21 @@
<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 } // append=false is over-ridden by data-append
)
}
var count = 3
t.plan(count * 4 + 2) // 2 tests at the end, plus 2 .on('template') tests x 2 DOM elements
_.range(count).forEach(function (i) {
$('script.append-dom')
.one('template', function (e) {
t.equals(+text(e.target), i)
t.deepEqual(e.templatedata, { n: i })
})
.template(
{ n: i },
{ append: false } // append=false is over-ridden by data-append
)
})
t.equal($('.new-dom').length, count * 2)
t.equal($('.append-dom-target .new-dom-target').length, count * 2)
t.end()
})
</script>
......@@ -199,16 +204,21 @@
<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 }
)
}
var count = 3
t.plan(count * 4 + 2) // 2 tests at the end, plus 1 .on('template') tests x 2 DOM elements
_.range(count).forEach(function (i) {
$('script.append-js')
.one('template', function (e) {
t.equals(+text(e.target), i)
t.deepEqual(e.templatedata, { n: i })
})
.template(
{ n: i },
{ append: true }
)
})
t.equal($('.new-js').length, count * 2)
t.equal($('.append-js-target .new-js-target').length, count * 2)
t.end()
})
</script>
......@@ -289,5 +299,6 @@
}, 0)
})
</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