插件 github 地址 https://github.com/KanbanSolutions/jquery-tmpl
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
script
type
=
"text/javascript"
src
=
"../../js/jquery-1.11.2.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"../../js/jquery.tmpl.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(function(){
var data = {username:"xiao",foods:[{name:"apple"},{name:"bear"}]};
$("script[name=template]").tmpl(data).appendTo("div[name=content]");
});
</
script
>
<
script
name
=
"template"
type
=
"text/x-jquery-tmpl"
>
username:{%= username%}<
br
/>
{%if foods.length == 0 %}
There is no foods.
{%else%}
There are {%= foods.length%} kinds of foods.<
br
/>
favourite foods are below.<
br
/>
{%each(i,food) foods%}
<
div
>{%= food.name%}</
div
>
{%/each%}
{%/if%}
</
script
>
</
head
>
<
body
>
<
div
name
=
"content"
></
div
>
</
body
>
</
html
>
|
Note : 最好将模板信息放在script标签里边，不然{%if%}表达式如果有>或<可能会有问题。
本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/1639903
