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

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