juicer.js的使用

juicer.js是阿里的一个轻量级模板引擎，使用他可以在纯html上使用el表达式。

先举例代码：

html：

<div><button type="button" id="query-dlq-config" class="btn btn-sm btn-primary"><iclass="fa fa-dot-circle-o"></i> 查询</button>
</div>
<div class="row" id="student-info"><!--学生信息查询功能模版......-->
</div><!--学生信息查询功能模版-->
<script id="student-info-script" type="text/template"><table class="table"><thead><tr><th>学生ID</th><th>学生名字</th><th>是否新生</th><th>更改</th></tr></thead><tbody>{@each studentInfos as studentInfo}<tr><td>${studentInfo.studentId}</td><td>${studentInfo.studentName}</td><td><select id="is-active">{@if studentInfo.isNew === "false"}<option value="false" selected>false</option><option value="true">true</option>{@else}<option value="false">false</option><option value="true" selected>true</option>{@/if}</select></td><th><a href="#" name="${student.sudentId}" id="update-student-info">更改</a></th></tr>{@/each}</tbody></table>
</script>

javascript:

 function queryStudentInfo(studentId) {$.ajax({type: "post",dataType: "json",contentType: "application/json",url: "/student/queryStudentInfo",async: false,data: JSON.stringify({"studentId": studentId}),success: function (res) {//新建数组用于存调到的数据var studentInfos = [];if (res) {res.forEach(function (entry) {studentInfos.push(entry);})}//新建变量用于存页面模版var $studentInfos = $("#student-info-script").html();//利用juicer将模版和数据放入页面指定位置$("#student-info").html(juicer($studentInfos, {"studentInfos": studentInfos}));dlqConfigUpdate();},error: function (reserr) {notie.alert({type: 3,text: reserr,stay: false,time: 3,position: "top"})}})}

jar:

我用的<script src="js/libs/juicer-min.js"></script>

使用介绍：

在html上要建立个模版，即一个用script标签包住的html，这样模版里便可以使用juicer的标签和表达式了；
在js里调juicer方法，即juicer(“模版”,”放入模版的数据”)，并指定将模版放入html页面什么位置；
模版里可以用 {@each studentInfos as studentInfo} 。。。 {@/each}遍历数据

可以用 {@if studentInfo.isNew === “false”}。。。 {@else}。。。{@/if}的选择标签

还可以自定义函数等等。

本文出自：https://blog.csdn.net/renhuan28/article/details/81867141

juicer.js的使用相关推荐

js模板引擎juicer嵌入html元素,Javascript 模板引擎（Juicer.js）--实现数据和视图模型的分离...
在开发流程表单或自定义页面时,经常会遇到类似主从表数据的展示,简单的做法就是循环的去拼接html,简单结构时这样做没问题.复杂的结构就不是很合适. Juicer.js可以方便的把数据和模板分离. 具体 ...
juicer html拼接,juicer.js的使用
juicer.js的使用 juicer.js是阿里的一个轻量级模板引擎,使用他可以在纯html上使用el表达式. 先举例代码: html: class="fa fa-dot-circle ...
juicer.js 使用示例
<!DOCTYPE html> <html lang="en-US"> <head> <title>测试&l ...
ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（15）之前台网站页面
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 本项目主要是一个素材的分 ...
微信开发小结——积累与沉淀
前言微信开发是个人.企业或组织在拥有超大用户群体的微信应用上,利用微信公众平台,开发类似插件或服务的轻应用.微信公众平台分为三种:订阅号:主要面向媒体和个人,旨在为用户提供信息资讯,每天能够群发1条 ...
js模板引擎juicer嵌入html元素,juicer模板引擎使用
页面模板 {&each ObjectData as it,index} ${it.UserId}${it.CreateTime} ${it.Explain} {&/each} // 调 ...
js模板引擎juicer嵌入html元素,juicer前端模板引擎(示例代码)
Juicer 中文文档:http://www.juicer.name/docs/docs_zh_cn.html 官网:http://juicer.name/ 一个Javascript模板引擎的实现和优 ...
Juicer 中文文档
Juicer 中文文档当前最新版本: 0.6.8-stable Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离( ...
js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...

juicer.js的使用

juicer.js的使用

juicer.js的使用相关推荐

最新文章

热门文章