artTemplate 模板补充插件

template

项目介绍

只是对artTemplate的一个补充,跳过artTemplate渲染模板的操作
项目地址

使用说明

data-* 说明

tpl主模板
includes//引用的子模板 必定是远程模板
remote//远程加载数据
onbefore//发起远程请求前响应
onafter//数据请求成功后响应
onrender//模板准备渲染 可修改数据
onload,//模板渲染完成之后
storage//数据key 本地(方法)或者缓存
others//其他数据 本地(方法)或者缓存

模板文件中可使用context数据对象
模板文件编写方式与artTemplate模板写法一致
$.fn.template.globalSettings //可配置模板默认参数或者全局回调
$.fn.template.globalSettings.base={tpl:'',remote:''} 可配置远程模板以及远程数据访问域名

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="art/template.js"></script>
    <script type="text/javascript" src="js/jquery.template2.js"></script>
    <script type="text/javascript">
        $.fn.template.globalSettings = {
            storage: 'ns',
            base: {},
            onbeforerender: function () {
              console.log("beforerender")
            },
            onchange: function () {
                console.log('change')
            }
        }
        var data = {a:1, b:222}
//        localStorage.setItem("abc", JSON.stringify({dd:{a:1, b:3}}))
        function onrender(){
            console.log('onrender',arguments)
        }

        function onload() {
          console.log('onload', arguments)
        }

        function onbefore(){
            console.log("before", arguments)
        }
        template.helper('stringify', JSON.stringify)
        $(function () {
            $("#main").template()
        })
    </script>

</head>
<body>
    <script id="tpl" type="text/html">
        {{data.a*data.b}}
    </script>
    <div id="main"
        data-tpl="admin.html"
        data-includes="admin1.html"
        data-remote="data.json"
        data-storage="abc"
        data-others="a"
        data-onbefore="onbefore"
        data-onrender="onrender"
        data-onload="onload">

    </div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/processengine/article/details/81510092