代码拉取完成，页面将自动刷新
基于Template7构建，语法类似Handlebars的JavaScript模版引擎.
JavaScript template engine based on Template7 with syntax similar to Handlebars.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/Template7/dist/template7.min.js"></script>
<script type="text/javascript" src="/src/engine7.js"></script>
</head>
<body>
...
</body>
</html>
<script type="text/template7" id="tmpl-skills">
<table border="1">
<tr><th>ID</th><th>Name</th></tr>
{{#each this}}
<tr>
<td>{{this.id}}</td><td>{{this.name}}</td>
</tr>
{{/each}}
</table>
</script>
<script type="text/template7" id="tmpl-user">
<h3>Name : {{this.name}}</h3>
<h3>Age : {{this.age}}</h3>
<h3>Address : {{this.address}}</h3>
<div data-tpl-id="tmpl-skills" data-api-url="data/skill.json?id={{this.id}}" data-api-param="{'name' : '{{this.name}}'}"></div>
</script>
{
"id" : 1,
"name" : "Jeffrey",
"age" : 33,
"address" : "Dalian Software Park, China",
"mail" : "jindong05@126.com"
}
[
{
"id" : 1,
"name" : "javascript"
},
{
"id" : 2,
"name" : "java"
}
]
<div data-tpl-id="tmpl-user" data-api-url="data/user.json"></div>
<script type="text/javascript">
Engine7.complete(function(){
... // Your code here.
});
</script>
Define a template. Always be used on a script tag.
<script type="text/template7" id="tmpl-test">
Auto generated by engine7.
Define a JSON API URL.
Supported by Template7 expressions.
<div data-tpl-id="tmpl-user-all" data-api-url="data/test.json?id={{this.id}}"></div>
Define a JSON API METHOD. Default is GET. (POST/GET)
<div data-tpl-id="tmpl-user-all" data-api-url="data/test.json" data-api-method="POST"></div>
Define API parameters.
Requires JSON formats And Supported by Template7 expressions.
<div data-tpl-id="tmpl-user-all" data-api-url="data/test.json" data-api-param="{'id': '{{this.id}}'}"></div>
Define a AJAX form. Always be used on a form tag.
The form will be submitted with AJAX.
The form elements will be converted to JSON.
<form id="form" data-ajax-form action="data/user.json">
<input name="name" type="text" value="1">
<input name="name" type="text" value="2">
<input name="user.test.ckbox" type="checkbox" value="a" checked>
<input name="user.test.ckbox" type="checkbox" value="b" checked>
</form>
The elements of form above will be converted to JSON below before form submitted.
{
"name" : ["1","2"],
"user" : {
test : {
ckbox : ["a","b"]
}
}
}
All instance of Engine7 template.
All instance of Engine7 request.
All instance of Engine7 form.
Events should be defined before Engine7 complete.
Before render a template.
Engine7.onBeforeRender("templateId", function(){
...
})
Engine7.complete();
After render a template.
Before invoke a API.
After invoke a API.
Invoke API error.
Before form submit.
After form submit.
Submit error.
Parent data pointer.
The example below , "$context.$context" equals the data of 'tmpl-user' .
<script type="text/template7" id="tmpl-test">
<div>{{$context.$context.name}}</div>
...
<script type="text/template7" id="tmpl-hobby">
<div data-tpl-id="tmpl-test" data-api-url="data/user.json"></div>
...
<script type="text/template7" id="tmpl-user">
<div data-tpl-id="tmpl-hobby" data-api-url="data/hobby.json"></div>
...
<div data-tpl-id="tmpl-user" data-api-url="data/user.json"></div>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。