当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
8 Star 15 Fork 5

jindong5210 / engine7
暂停

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

Engine7

基于Template7构建,语法类似Handlebars的JavaScript模版引擎.

  • 用JSON API来渲然模板.
  • 模版支持嵌套.
  • 封装AJAX表单提交.
  • 表单的数据可转换为可嵌套JSON格式.
  • 对Template7进行了扩展.

JavaScript template engine based on Template7 with syntax similar to Handlebars.

  • Render a template with JSON API.
  • Nested template supported.
  • AJAX form submit supported.
  • Form data could convert to nested JSON.
  • Template7 helper extension.

Getting Started

<!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>
  • Define templates
<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>
  • Define JSON APIs
{
	"id" : 1,
	"name" : "Jeffrey",
	"age" : 33,
	"address" : "Dalian Software Park, China",
	"mail" : "jindong05@126.com"
}
[
	{
		"id" : 1,
		"name" : "javascript"
	},
	{
		"id" : 2,
		"name" : "java"
	}
]
  • Render in html
<div data-tpl-id="tmpl-user" data-api-url="data/user.json"></div>
<script type="text/javascript">
Engine7.complete(function(){
	... // Your code here.
});
</script>

Reference

Attributes

  • data-tpl-id

    Define a template. Always be used on a script tag.

    <script type="text/template7" id="tmpl-test">
  • data-tpl-ref

    Auto generated by engine7.

  • data-api-url

    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>
  • data-api-method

    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>
  • data-api-param

    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>
  • data-ajax-form

    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"]
            }
        }
    }

Properties

  • templates

    All instance of Engine7 template.

  • requests

    All instance of Engine7 request.

  • forms

    All instance of Engine7 form.

Methods

  • complete

    The startup method of Engine7.

Events

Events should be defined before Engine7 complete.

  • onBeforeRender (TemplateId , Callback)

    Before render a template.

    Engine7.onBeforeRender("templateId", function(){
        ...
    })
    Engine7.complete();
  • onAfterRender (TemplateId , Callback)

    After render a template.

  • onBeforeInvoke (TemplateId , Callback)

    Before invoke a API.

  • onAfterInvoke (RequestId , Callback)

    After invoke a API.

  • onInvokeError (RequestId , Callback)

    Invoke API error.

  • onBeforeSubmit (FormId , Callback)

    Before form submit.

  • onSubmitBack (FormId , Callback)

    After form submit.

  • onSubmitError (FormId , Callback)

    Submit error.

Variables in Template

  • $context

    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>

Helpers

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

做APP的利器。可嵌套的JS模版引擎,支持JSON API 渲染,支持AJAX form 提交 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

engine7

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/jindlab/engine7.git
git@gitee.com:jindlab/engine7.git
jindlab
engine7
engine7
master

搜索帮助

挂件 关闭按钮