JsRender (js模板引擎)

　　最近学习了一下Jsrender模板渲染工具，非常不错，功能比较强大，官网说他是“简单直观功能强大可扩展的快如闪电”确实如此。总结一下！！

jsRender 三个最重要的概念：模板、容器和数据。最重要的是：view(视图) 是我们定义的模板，上下文是视图所用的对象。

一、基础。

{{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。　　

{{: pathOrExpr}}             (value) 值类型
{{> pathOrExpr}}             (HTML-encoded value) html编码后的值
{{* mycode}}                 (using code) 代码

二、逻辑判断和循环。

if-else

　　语法：{{if condition}} ... {else condition} ... {{else}}... {{/if}}

例子：

<script type="text/tmp" id="tmp4"> <p>my name is: {{:name}}</p> <p>我是： {{if info.age >= 18}} 成年人 {{else}} 未成年 {{/if}} </p> </script> var html = $("#tmp4").render(data); $("#list").html(html);

for

　语法： {{for}} ... {{/for}}

　　例子：

<script type="text/tmp" id="tmp5"> {{for}} <li>id:{{:ID}} name:{{:Name}}</li>  {{/for}} </script> var arr = [ { ID: 1, Name: "tom" }, { ID: 2, Name: "jack" }, { ID: 3, Name: "lucy"} ]; var html = $("#tmp5").render(arr); $("#list").html(html);

　　嵌套for

　　语法：语法：{{for}}...{{for 当前上下文}} ... {{/for}} ... {{/for}}

　　例子：

<script type="text/tmp" id="tmp7"> {{for}} <li> name:{{:name}} <ul> {{for hobbies}} <li>{{:#getIndex() + 1}}:{{:#data}}</li>  {{/for}} </ul> </li> {{/for}} </script> arr = [ { name: "tom", hobbies: ["篮球", "足球"] }, { name: "jack", hobbies: ["篮球", "橄榄球"] }, { name: "lucy", hobbies: ["游泳", "羽毛球"] } ]; var html = $("#tmp7").render(arr); $("#list").html(html);

　　分离for

　　语法：{{for 上下文 tmpl="模板id" /}}

　　如果for的逻辑比较复杂，嵌套的for就会让我们的模板变得复杂，维护难度加大；我们可以将for分离，以上面的例子，可以将for放到一个新的模板，然后通过 tmpl属性指定。　　

　　例子：

<script type="text/tmp" id="tmp8"> {{for}} <li> name:{{:name}} <ul> {{for hobbies tmpl="#tmp9" /}} </ul> </li> {{/for}} </script> <script type="text/tmp" id="tmp9"> <li>{{:#getIndex() + 1}}:{{:#data}}</li> </script> var html = $("#tmp8").render(arr); $("#list").html(html);

　嵌套循环使用参数访问父级数据，直接看例子：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套循环使用参数访问父级数据</title>

</head>
<body>

</tbody>
</table>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/Jsrender.js"></script>
<script id="testTmpl" type="text/x-jsrender">
    <tr>
        <td>{{:#index + 1}}</td>
        <td>{{:name}}</td>
        <td>{{:age}}</td>
        <td>
          {{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}
          {{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}
          {{for family ~parentIndex=#index ~parentName=name ~parnetAge=age}}
            <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
            {{!-- #data相当于this --}}
            {{:~parentName}}的{{:#data}}{{:~parnetAge}}
          {{/for}}
        </td>
      </tr>
</script>

　　三、扩展应用

　　　　上面的基本用法已经可以满足大部分需求了。以下几个扩展都是为了分离视图和逻辑的，试想一下，如果我们的视图里还需要大量的逻辑判断或计算，全都写在一起，那会非常麻烦和难以维护。视图最好就是简单的标签，而逻辑都写在js里。jsRender是在视图上进行扩展的。

　　组合模板： include 组合模板

　　语法：include tmpl="模板id"

　　例子：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>include 组合模板</title> <script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/Jsrender.js"></script> </head> <body> <p>{{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。</p> <script id="peopleTemplate" type="text/x-jsrender"> <div> {{:name}} lives in {{include tmpl="#addressTemplate"/}} </div> </script> <script id="addressTemplate" type="text/x-jsrender"> <b>{{>address.city}}</b> </script> <div id="peopleList"></div> <script> var people = [ { "name": "Pete", "address": { "city": "Seattle" } }, { "name": "Heidi", "address": { "city": "Sidney" } } ]; var html = $("#peopleTemplate").render(people); $("#peopleList").html(html); </script> </body> </html>

　　自定义标签：views.tags和 views.helpers

语法：

　　 views.tags

　　　　　　1.视图 {{"标签名称" 标签参数附加参数}}

　　　　　　2.逻辑 $.views.tags({"标签名称":function(参数){this.tagCtx.props.prefix附加参数}}) //prefix附加参数是你传的参数名称

views.helpers

　　　　　　1、视图{{~“标签名称”(附加参数)}}

　　　　　　2、逻辑$.views.helpers（{“标签名称”：function（参数）{//具体逻辑}}）

　　　因为两者基本都一样，但是views.helpers比较灵活

　　　　例子：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>两种自定义标签 views.tags和 views.helpers </title> </head> <body> <p>不推荐使用 $.views.tags 这种自定义标签 建议使用$.views.helpers </p> <div> <p>views.tags</p> <table> <thead> <tr> <th width="50%">名称</th> <th width="50%">单价</th> </tr> </thead> <tbody id="list"> <!-- 定义JsRender模版 --> <script id="testTmpl" type="text/x-jsrender"> <tr> <td>{{:name}}</td> <td> {{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}} {{isShow price age=0}} {{:price}} {{else price age=1}} -- {{/isShow}} </td> </tr> </script> </tbody> </table> </div> <br/><br/> <br/><br/> <div id="div2"> <p>views.helpers</p> <table> <thead> <tr> <th width="50%">名称</th> <th width="50%">单价</th> </tr> </thead> <tbody id="list2"> <script id="testTmpl2" type="text/x-jsrender"> <tr> <td>{{:name}}</td> <td> {{!-- 利用原生的if做分支跳转，利用helper做逻辑处理 --}} {{if ~isShow123(price)}} {{:price}} {{else}} -- {{/if}} </td> </tr> </script> </tbody> </table> </div> <body> <script src="../js/jquery-3.1.1.min.js"></script> <script src="../js/Jsrender.js"></script> <script> //数据源 var dataSrouce = [{ name: "苹果", price: 108 },{ name: "鸭梨", price: 370 },{ name: "桃子", price: 99 },{ name: "菠萝", price: 371 },{ name: "橘子", price: 153 }]; //自定义标签 $.views.tags可以自定义标签，指定自定义标签的渲染规则。它可以给一段固定格式的html块起个名称，然后通过这个名称直接调用 $.views.tags({ "isShow": function(price){ var temp=price+''.split(''); //this.tagCtx.render(val)有点像指定参数的感觉。官方说是 if(this.tagCtx.props.age === 0){ //判断价格是否为水仙花数，如果是，则显示，否则不显示 if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ return "<p><em style='color: red'>"+this.tagCtxs[0].render()+"</em></p>"; }else{ return this.tagCtxs[1].render(); } }else{ return ""; } } }); $.views.helpers({ "isShow123": function(price){ var temp=price+''.split(''); if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){ return true; }else{ return false; } } }); //views.tags渲染数据 var html = $("#testTmpl").render(dataSrouce); $("#list").append(html); //vies.helpers渲染数据 var html2 = $("#testTmpl2").render(dataSrouce); $("#list2").append(html2); </script> </body> </html>

　　转换器 converter

转换器可以对输出结果进行处理，例如大小写转换等。

语法：

　　　　1. 视图 {{"转化器名称":参数}}

　　　　2. js $.views.converters({"转换器名称":function(参数){...}})

<script type="text/tmp" id="tmp11"> {{for}} <li> Upper Name: {{toUpper:#parent.data.name}} </li>  {{/for}} </script> $.views.converters({ "toUpper":function(name){ if(name){ return name.toUpperCase(); } } }) var html = $("#tmp11").render(arr); $("#list").html(html)

　　嗯，再次介绍一个比较好的例子网站：http://borismoore.github.io/jsrender/demos/demos.html，最好是参考官网：www.jsviews.com

转载于:https://www.cnblogs.com/duanyue/p/6774218.html

JsRender (js模板引擎)相关推荐

js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
js模板引擎之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...
简单实用的js模板引擎
转自:微点阅读 https://www.weidianyuedu.com 不足50行的js模板引擎,支持各种js语法: <script id="test_list" typ ...
doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

JsRender (js模板引擎)

JsRender (js模板引擎)相关推荐

最新文章

热门文章