JsRender 前端渲染模板基础学习

JsRender前端渲染模板

使用模板，可以预先自定义一些固定格式的HTML标签，在需要显示数据时，再传入真实数据组装并展示在Web页中；避免了在JS中通过“+”等手动分割、连接字符串的复杂过程；针对高性能和纯字符串渲染进行了优化；无需依赖DOM和jQuery；

优先使用场景：元素重复出现；动态加载数据，并前端显示；

JsRender使用

引入js
定义模板
准备好要显示的数据 json对象
编译成元素：document.getElementById(“XXX”).render(data); 或 $("#XXX").render(data);
通过容器元素的append、before、after显示

一、基本语法

原始赋值： {{:属性名}}，显示原始数据
转码赋值： {{>属性名}}，显示HTML编码后的数据，让数据原样输出
控制语句可嵌套使用：
- 判断： {{if 表达式}} … {{else}} … {{/if}}
- 循环： {{for 数组}} … {{/for}}
其它进阶
- 模板嵌套，使用：{{for tmpl="#另一个模板" /}}
- 转换器 $.views.converters()定义，使用：{{func:属性名}}
- 帮助方法 $.views.helpers()定义，使用：{{if ~func(arg1, arg2, ...)}}
- 自定义标签 $.views.tags()

基本变量标签 {{:name}}

基本变量需要使用冒号 ":" 作为标识，一般是简单对象的某个属性。比如传入一个简单对象data

引入jquery-3.2.1.min.js 和 jsrender.min.js

<script src="/Scripts/jquery-3.2.1.min.js"></script>
<script src="/Content/jsrender.min.js"></script>

<body>
    <div id="result"></div>

    <script type="text/x-jsrender" id="Tmpl">
        <p>Name: {{:name}}</p>
        <p>Age: {{:age}}</p>
    </script>

    <script>
        var data = {
            'name': 'van',
            'age': 18
        }

        var html2 = $("#Tmpl").render(data);
        $("#result").append(html2);
    </script>
</body>

传入一个多层级对象data

 <div id="result"></div>

    <script type="text/x-jsrender" id="Tmpl">
        <p>Name: {{:Info.name}}</p>
        <p>Age: {{:Info.age}}</p>
        <p>{{:Details.Address}}</p>
        <p>{{:Details.Hobby.TableTennis}}</p>
    </script>

    <script>
        var data = {
            'Info': {
                'name': 'van',
                'age': 18
            },
            'Details': {
                'Hobby': {
                    'TableTennis': 'I like Table Tennis',
                    'Basketball': 'I like Basketball'
                },
                'Address': 'My address'
            }
        }

        var html2 = $("#Tmpl").render(data);
        $("#result").append(html2);
    </script>

View Code