ENH: $.template() can be applied on parent element

README.md

@@ -106,17 +106,18 @@ This activates all `.urlfilter` classes as below:
 ```html
 <script type="text/html">Your platform is <%= navigator.userAgent %></script>
 <script>
-  $('script[type="text/html"]').template()
+  $('body').template()
 </script>
 ```
 
-renders [lodash templates](https://lodash.com/docs/#template) with data. This displays
-`Your platform is ...` and shows the userAgent just below the script tag.
+renders all `script[type="text/html"]` as [lodash templates](https://lodash.com/docs/#template).
+This displays `Your platform is ...` and shows the userAgent just below the script tag.
 
 - Anything inside `<% ... %>` is executed as Javascript.
 - Anything inside `<%= ... %>` is evaluated in-place.
 
-You can pass data as `.template(data)`. The keys in `data` are available as variables to the template. For example:
+The template can use all global variables. You can pass additional variables
+using as `.template({var1: value, var2: value, ...})`. For example:
 
 ```html
 <script type="text/html">
@@ -125,7 +126,7 @@ You can pass data as `.template(data)`. The keys in `data` are available as vari
   <% }) %>
 </script>
 <script>
-  $('script[type="text/html"]').template({list: ['a', 'b', 'c']})
+  $('body').template({list: ['a', 'b', 'c']})
 </script>
 ```
 
@@ -138,7 +139,7 @@ Template containers can have an `src=` attribute that loads the template from a
 ```html
 <script type="text/html" src="template.html"></script>
 <script>
-  $('script[type="text/html"]').template()
+  $('body').template()
 </script>
 ```
 
@@ -156,7 +157,27 @@ For example:
   Data is <%= data %>
 </script>
 <script>
-  $('script[type="text/html"]').template({data: data})
+  $('body').template({data: data})
+</script>
+```
+
+`$().template()` renders all `script[type="text/html"]` nodes.
+Use `data-selector=` attribute to change the selector. For example:
+
+```html
+<section data-selector="script.lodash-template">
+  <script class="lodash-template">...</script>
+</section>
+<script>
+  $('section').template()
+</script>
+```
+
+Or you can directly render templates using
+
+```html
+<script>
+  $('script.lodash-template').template()
 </script>
 ```
 

src/jquery.template.js

+import { findall } from './_util.js'
+
 var _renderer = 'template.render',
     _target = 'template.target'
 
@@ -29,9 +31,11 @@ function make_template($this, html, data) {
 }
 
 export function template(data) {
+  var selector = this.data('selector') || 'script[type="text/html"]'
+
   // Pre-create the template rendering function
   // Store this in .data('template.function')
-  this.each(function () {
+  findall(this, selector).each(function () {
     var $this = $(this)
     var renderer = $this.data(_renderer)
     // If there's no template function cached, cache it

test/jquery.template.html

@@ -80,5 +80,34 @@
       }).template(data)
     })
   </script>
+
+  <section class="root1">
+    <script type="text/html"><%= 1 + 1 %></script>
+    <script type="text/html"><%= 2 + 2 %></script>
+  </section>
+  <script>
+    tape('$().template() renders templates of all script[type="text/html"] sub-elements', function(t) {
+      var results = ['2', '4']
+      t.plan(results.length)
+      var index = 0
+      $('.root1').on('template', function (e) {
+        t.equal(text(e.target), results[index++])
+      }).template()
+    })
+  </script>
+
+  <section class="root2" data-selector="script.template">
+    <script type="text/html"><div class="result"><%= 1 + 1 %></div></script>
+    <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
+      $('.root2').on('template', function (e) {
+        t.equal(e.target.filter('.result').text(), '4')
+        t.end()
+      }).template()
+    })
+  </script>
 </body>
 </html>