template.js简单入门

template.js是一款开源的JavaScript模板引擎，用来渲染页面的。

github地址 https://github.com/yanhaijing/template.js

下载template.js导入项目中

 

 

准备测试的json数据

 

展示页面

 

 

模板文件：用 {{}}做占位符

 

渲染模板脚本：template(模板名称，数据)

 

页面效果：

 

 

上面是已经最简单的例子。仅仅是显示，但经常会有添加判断，比如：

先修改json数据：

模板文件的if判断，可以看到，需要保存的值可以放在自定义属性中：txt_age="{{age}}"

{{name=="张三"?1:0}}为三元运算符

因为json是一个集合，所以要循环渲染模板，当然也可以在模板中循环，后面会讲

运行结果：可以看到自定义属性保存了值，也展示了效果

 

 

当然：上面是循环渲染模板，那么也可以只渲染一次，传一个数组给模板文件，

在模板文件中循环添加数据。用each关键字，这里的data是json的一个对象 json = {data:[],msg:[]}

遍历data就用each data，遍历msg则是each msg 前提它们是数组，通过$value.熟悉名称取值

既然模板文件需要一个数组，那么就得传一个数组过来，这里传json

同样看看效果：

 

 

还有就是：虽然传过来的是一个集合。你也可以根据索引来取值，比如：

运行结果就不贴图了

 

一个简简单单的例子，数据都是模拟数据，仅供参考，测试源代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Do._default" %>

<!DOCTYPE html>
<%--https://github.com/yanhaijing/template.js--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="jquery-1.10.2.js"></script>
    <script src="template.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        $(function () {

            //--------------
            var json = {
                name: '张三',
                age: 18,
                address: '深圳'
            };
            //$("#warp").append(template("info-tpl", json));

            //--------------
            json = {
                data: [
                    {
                        name: '张三',
                        age: 18,
                        address: '深圳'
                    },
                    {
                        name: '李四',
                        age: 28,
                        address: '深圳'
                    },
                    {
                        name: '王五',
                        age: 28,
                        address: '深圳'
                    }
                ],
                msg: [
                    {
                        name: '张三11',
                        age: 18,
                        address: '深圳'
                    }
                ]
            };

            //循环渲染模板
            //$.each(json.data, function (i, v) {
            //    $("#warp").append(template("info-tpl1", v));
            //});
          
            //--------------
            //$("#warp").append(template("info-tpl2", json));

            $("#warp").append(template("info-tpl3", json));

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <!--展示部分显示-->
        <div id="warp">
        </div>
    </form>
</body>
</html>
<!--简单模板文件-->
<script id="info-tpl" type="text/html">
    <div>{{name}}</div>
    <div>{{age}}</div>
</script>

<!--条件判断：模板文件-->
<script id="info-tpl1" type="text/html">
    <div txt_age="{{age}}"><!--txt_age为自定义属性-->
        {{if name=="张三"}}
       <label style="color: red;">{{name}}</label>
        {{else if name=="李四"}}
       <label style="color: plum;">{{name}}</label>
        {{else}}
       <label style="color: blue;">{{name}}</label>
        {{/if}}

       {{name=="张三"?1:0}}
    </div>
</script>

<!--索引取值：模板文件-->
<script id="info-tpl2" type="text/html">
    <div>
        {{data[0].name}}
    </div>
    <div>
        {{data[1].name}}
    </div>
</script>


<script id="info-tpl3" type="text/html">
    <div>
        <select class="form-control" style="width: 100px;">
            {{each data}}
        <option id="{{$value.age}}">{{$value.name}}</option>
            {{/each}}
        </select>
    </div>
</script>

 

template.js