Commit d7c653e8 authored by S Anand's avatar S Anand
Browse files

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

parent 7f77ff93
......@@ -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>
```
......
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
......
......@@ -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>
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