Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
cto
g1
Commits
d7c653e8
Commit
d7c653e8
authored
Dec 26, 2017
by
S Anand
Browse files
ENH: $.template() can be applied on parent element
parent
7f77ff93
Changes
3
Hide whitespace changes
Inline
Side-by-side
README.md
View file @
d7c653e8
...
...
@@ -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
View file @
d7c653e8
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
View file @
d7c653e8
...
...
@@ -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>
S Anand
@s.anand
mentioned in issue
#2 (closed)
·
Dec 25, 2017
mentioned in issue
#2 (closed)
mentioned in issue #2
Toggle commit list
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment