Jsrender初体验
2016-09-19 19:33
288 查看
支持一个活动,在以往项目基础上修修改改,通过这类小微项目快速熟悉开发、测试以及部署环境。
前端页面中看到了一段Js代码,从语法结构上看有点像模板引擎,最后确认是一个基于jquery的模板引擎-JsRender.官网
特定的js标签,通过API可以很方便生成html代码,ajax获取后端json数据后渲染为html代码,然后显示到容器中,简洁易用的API,今后的项目开发多了一个选择。
JsRender提供了常用的流程控制,非常方便,项目中主要用到了一个循环生成产品列表,后续根据实际情况再慢慢熟悉。
前端页面中看到了一段Js代码,从语法结构上看有点像模板引擎,最后确认是一个基于jquery的模板引擎-JsRender.官网
特定的js标签,通过API可以很方便生成html代码,ajax获取后端json数据后渲染为html代码,然后显示到容器中,简洁易用的API,今后的项目开发多了一个选择。
JsRender提供了常用的流程控制,非常方便,项目中主要用到了一个循环生成产品列表,后续根据实际情况再慢慢熟悉。
<script type="text/x-jsrender" id="scriptProductList"> {{for ProductList}} <div class="product"> <a target="_blank" href="{{>productURL}}" class="pro-name" title="{{>productName}}">{{>productName}}</a> <a target="_blank" href="{{>companyURL}}" class="pro-com" title="{{>companyName}}">{{>companyName}}</a> </div> {{/for}} </script>
var html = $("#scriptProductList").render({ "ProductList":data.results }); $("#divRender").html(html);
相关文章推荐
- JavaScript的核心
- JavaScript自执行函数
- hammer.js---拖动滑块实现验证的小demo
- js页面遮蔽层
- 常用的table表格排序 - sortablejs
- resin 第一次加载jsp时,出现错误illegal utf8 encoding at (190)
- GSON解析json数据详解
- JS闭包
- 有关用AJAX发送json数据到后台的问题总结
- JavaScript console 函数
- Sturts2中action向jsp页面传值
- 【原】十张javascript思维导图
- javascript高级程序设计——笔记
- javascript创建函数的方法
- 标注 @JsonInclude(Include.NON_NULL)
- JavaScript
- Scrollanim---鼠标向下滚动加载动画,与wow.js类似
- videojs的使用以及如何把播放按钮居中
- json的细节
- jsp基本语法