前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布

Juicer

作者头像
公众号---人生代码
发布2021-01-27 15:56:32
5060
发布2021-01-27 15:56:32
举报
文章被收录于专栏:人生代码人生代码

名字的由来

倘若我们把数据比作新鲜可口的水果,把模板看做是水,Juicer 就是把水果和水榨出我们需要的HTML代码片段的榨汁机。

Juicer 的引入

代码语言:javascript
复制
<script type="text/javascript" src="juicer-min.js"></script>

使用方法

编译模板并根据所给的数据立即渲染出结果.

代码语言:javascript
复制
juicer(tpl, data);

语法

$变量} 使用

{} 输出变量值,其中 _ 为对数据源的引用(如

{_},常用于数据源为数组的情况)。支持自定义函数(通过自定义函数你可以实现很多有趣的功能,类似 ${datalinks就可以通过事先定义的自定义函数 links 直接对 data 拼装出 ).

代码语言:javascript
复制
${name}
${name|function}
${name|function, arg1, arg2}

让我们通过一个例子演示一下自定义函数的奇妙用法吧.

代码语言:javascript
复制
var json = {
    links: [
        {href: 'http://juicer.name', alt: 'Juicer'},
        {href: 'http://benben.cc', alt: 'Benben'},
        {href: 'http://ued.taobao.com', alt: 'Taobao UED'}
    ]
};
 
var tpl = [
    '{@each links as item}',
        '${item|links_build} <br />',
    '{@/each}'
].join('');
 
var links = function(data) {
 return '<a href="' + data.href + '" alt="' + data.alt + '" />';
};
 
juicer.register('links_build', links); //注册自定义函数
juicer(tpl, json);

上述代码执行后我们会发现结果是这样的:

代码语言:javascript
复制
<a href="http://juicer.name" alt="Juicer" <br />
<a href="http://benben.cc" alt="Benben" <br />
<a href="http://ued.taobao.com" alt="Taobao UED" <br />

转义/避免转义

出于安全角度的考虑,

{变量} 在输出之前会对其内容进行转义,如果你不想输出结果被转义,可以使用

${变量} 来避免这种情况。例如:

代码语言:javascript
复制
var json = {
    value: '<strong>juicer</strong>'
};
 
var escape_tpl='${value}';
var unescape_tpl='$${value}';
 
juicer(escape_tpl, json); //输出 '<strong>juicer</strong>'
juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>'

循环遍历 {@each} ... {@/each}

如果你需要对数组进行循环遍历的操作,就可以像这样使用 each .

代码语言:javascript
复制
{@each list as item}
 ${item.prop}
{@/each}

如果遍历过程中想取得当前的索引值,也很方便.

代码语言:javascript
复制
{@each list as item, index}
 ${item.prop}
 ${index} //当前索引
{@/each}

判断 {@if} ... {@else if} ... {@else} ... {@/if}

代码语言:javascript
复制
{@each list as item,index}
    {@if index===3}
        the index is 3, the value is ${item.prop}
    {@else if index === 4}
        the index is 4, the value is ${item.prop}
    {@else}
        the index is not 3, the value is ${item.prop}
    {@/if}
{@/each}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 名字的由来
  • Juicer 的引入
  • 使用方法
  • 语法
  • 转义/避免转义
  • 循环遍历 {@each} ... {@/each}
  • 判断 {@if} ... {@else if} ... {@else} ... {@/if}
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档