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
5076c788
Commit
5076c788
authored
Nov 24, 2018
by
S Anand
Browse files
ENH: $.template supports list creation. Fixes
#115
parent
84b4ba06
Pipeline
#68406
passed with stage
in 2 minutes and 16 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
README.md
View file @
5076c788
...
...
@@ -920,7 +920,7 @@ To re-render the template, run `.template(data)` again with different data.
### $.template options
To re-use the template
, i.e.
render the same template on a different DOM node,
To re-use the template
or
render the same template on a different DOM node,
run
`.template(data, {target: selector})`
. This allows you to declare templates
once and apply them across the body. For example:
...
...
@@ -931,6 +931,35 @@ $('script.chart')
.
template
({},
{
target
:
'
.no-heading
'
})
```
The target can also be specified via a
`data-target=".dashboard1"`
on the script
template. This is the same as specifying
`{target: '.dashboard'}`
. For example:
```
html
<script
class=
"chart"
data-target=
".dashboard1"
>
...
</script>
<script
class=
"chart"
data-target=
".dashboard2"
>
...
</script>
```
To append instead of replacing, run
`.template(data, {append: true})`
. Every
time
`.template`
is called, it appends rather than replaces. For example:
```
js
$
(
'
script.list
'
)
.
template
({
heading
:
'
Item 1
'
},
{
append
:
true
}),
// Appends the heading
.
template
({
heading
:
'
Item 2
'
},
{
append
:
true
}),
// instead of replacing it
```
You can also specify this as
`<script data-append="true">`
. This helps append to
an existing target. For example:
```
html
<script
class=
"list"
data-append=
"true"
data-target=
".existing-list"
>
...
</script>
<ul
class=
"existing list"
>
<li>
Existing item
</li>
<!-- Every time .template() is called, the result is added as a list item here -->
</ul>
```
### $.template attributes
Template containers can have an
`src=`
attribute that loads the template from a file:
...
...
src/template.js
View file @
5076c788
...
...
@@ -6,7 +6,7 @@ var _renderer = 'template.render',
// Bind a template renderer to the node $this.data('template.render')
// The _renderer function
// - runs the html template, parses the result, and create a target node
// - appends the target node after $this (clearing any previous target nodes
s
)
// - appends the target node after $this (clearing any previous target nodes)
// - stores the target node in $this.data('template.target')
// - triggers a template event (with .templatedata, .target)
// - returns the target node
...
...
@@ -19,19 +19,26 @@ function make_template($this, html, data, default_options) {
// Parse the template output and create a node collection
// $.parseHTML ensures that "hello" is parsed as HTML, not a selector
$target
=
$
(
$
.
parseHTML
(
template
(
data
)))
// Get options. DOM over-rides JS options
var
append
=
$this
.
data
(
'
append
'
)
||
(
options
?
options
.
append
:
default_options
.
append
)
var
target
=
$this
.
data
(
'
target
'
)
||
(
options
?
options
.
target
:
default_options
.
target
)
// Render into target node if specified
// Else, render immediately after source node
var
target
=
options
?
options
.
target
:
default_options
.
target
if
(
typeof
target
!=
'
undefined
'
)
{
$
(
target
).
html
(
$target
)
if
(
append
)
$
(
target
).
append
(
$target
)
else
$
(
target
).
html
(
$target
)
}
else
{
// Clear old target nodes if any
var
$old_target
=
$this
.
data
(
_target
)
if
(
$old_target
)
$old_target
.
remove
()
// Add the target HTML. "before" ensures that future appends are one below the other
$this
.
before
(
$target
)
// Store the target nodes for future reference
$this
.
after
(
$target
)
.
data
(
_target
,
$target
)
if
(
!
append
)
$this
.
data
(
_target
,
$target
)
}
// Trigger the template event
$this
.
trigger
({
type
:
'
template
'
,
templatedata
:
data
,
target
:
$target
})
...
...
test/test-template.html
View file @
5076c788
...
...
@@ -4,7 +4,7 @@
<title>
template tests
</title>
<script
src=
"../node_modules/jquery/dist/jquery.min.js"
></script>
<script
src=
"../node_modules/lodash/lodash.min.js"
></script>
<script
src=
"../dist/
template.min
.js"
></script>
<script
src=
"../dist/
g1
.js"
></script>
<script
src=
"tape.js"
></script>
</head>
<body>
...
...
@@ -126,13 +126,63 @@
<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 temp
a
lte (with .template) is triggered, not the first one
tape
(
'
$().template() accepts data-selector to select sub-elements
'
,
function
(
t
)
{
// The second templ
a
te (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>
<script
class=
"target-dom"
data-target=
".target1"
type=
"text/html"
>
1
+
1
=
<%=
1
+
1
%>
</script>
<script
class=
"target-dom"
type=
"text/html"
>
2
+
2
=
<%=
2
+
2
%>
</script>
<div
class=
"target1"
></div>
<div
class=
"target2"
></div>
<script>
tape
(
'
$().template() data-target specifies target, overrides {target:...}
'
,
function
(
t
)
{
t
.
plan
(
2
)
var
count
=
0
// Wait for both templates to be done. Then check if the text has changed
$
(
'
script.target-dom
'
).
on
(
'
template
'
,
function
(
e
)
{
count
++
if
(
count
==
2
)
{
t
.
equal
(
$
(
'
.target1
'
).
text
(),
'
1 + 1 = 2
'
)
t
.
equal
(
$
(
'
.target2
'
).
text
(),
'
2 + 2 = 4
'
)
}
}).
template
({},
{
target
:
'
.target2
'
})
})
</script>
<script
class=
"append-dom"
data-append=
"true"
type=
"text/html"
>
<
span
class
=
"
appended-dom
"
><%=
n
%><
/span>
</script>
<script
class=
"append-dom"
data-append=
"true"
data-target=
".append-dom-target"
type=
"text/html"
>
<
span
class
=
"
appended-dom-target
"
><%=
n
%><
/span>
</script>
<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
})
}
t
.
equal
(
$
(
'
.appended-dom
'
).
length
,
count
)
t
.
equal
(
$
(
'
.append-dom-target .appended-dom-target
'
).
length
,
count
)
t
.
end
()
})
</script>
<script
class=
"append-js"
type=
"text/html"
>
<
span
class
=
"
appended-js
"
><%=
n
%><
/span>
</script>
<script
class=
"append-js"
data-target=
".append-js-target"
type=
"text/html"
>
<
span
class
=
"
appended-js-target
"
><%=
n
%><
/span>
</script>
<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
})
}
t
.
equal
(
$
(
'
.appended-js
'
).
length
,
count
)
t
.
equal
(
$
(
'
.append-js-target .appended-js-target
'
).
length
,
count
)
t
.
end
()
})
</script>
</body>
</html>
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