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

docs/template.md

@@ -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')

src/template.js

@@ -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>

test/test-template.html

@@ -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>