jsrender 学习入门 demo

1.引入我们所需要的js包

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="js/jsrender-min.js"></script>

2.编写我们要输出内容的div

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

3.编写我们的数据

<script>
var data = [{"title":    "山水图","imgpath":"http://pic17.nipic.com/20111111/7953751_140357624000_2.jpg",'alink':"http://pic17.nipic.com/20111111/7953751_140357624000_2.jpg","showPic":true},{"title":   "山水画","imgpath":"http://pic29.nipic.com/20130525/8960079_091008529373_2.jpg",'alink':"http://pic29.nipic.com/20130525/8960079_091008529373_2.jpg","showPic":true}
];
var templates = $.templates("#contentarea");
var htmlOutput = templates.render(data);
$("#result").html(htmlOutput);
</script>

4.编写我们遍历的div布局

<script type="text/jsrender" id="contentarea"><div class="content"><em>name：</em>{{:title}}{{if showPic && imgpath }}<a href={{:alink}} target='_blank'> <img src='{{:imgpath}}' width='100' height='100' /></a>{{/if}}</div>
</script>

（注：3和4的顺序可以颠倒过来）

jsrender 学习入门 demo相关推荐

深度学习入门demo mnist
文章目录环境 1.全连接层实现 2.使用LeNet-5实现模型框架实现代码模型总结 3.AlexNet 模型框架模型实现模型总结 VGG 模型总结环境 python3.7 gpu: RT ...
React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心需要引入三个库什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
dubbo web工程示例_分布式开发-Zooker+dubbo入门-Demo
作者:知了堂-刘阳 1.什么是SOA架构 SOA 是Service-Oriented Architecture的首字母简称,它是一个面向服务的架构模式(俗称:分布式:面服务的分布式) 为什么互联网项目 ...
接口测试学习入门（1）--前期知识储备
转自:http://www.cnblogs.com/alwayswyy/p/5481574.html 接口测试学习入门(1)--前期知识储备接口测试前必需知识了解: 1.接口测试的原理: 无论用那种 ...
motan学习笔记五 opentracing学习入门
motan学习笔记一微博轻量级RPC框架Motan motan学习笔记二 motan架构分析 motan学习笔记三 motan Demo 分析 motan学习笔记四 motan Demo 之 ...
TensorFlow学习——入门篇
本文主要通过一个简单的 Demo 介绍 TensorFlow 初级 API 的使用方法,因为自己也是初学者,因此本文的目的主要是引导刚接触 TensorFlow 或者机器学习的同学,能够从第一步开始 ...
java编程学习入门
java编程学习入门自java出来之后,就被很多人欢迎,虽然开始的时候有点麻烦,但是发展到现在很多人企业都在使用java做一些应用,包括了一些政府部门,因此java工程师需求也越来越大了.那么下面小 ...
局部连接来减参，权值共享肩并肩（深度学习入门系列之十一）
系列文章: 一入侯门"深"似海,深度学习深几许(深度学习入门系列之一) 人工"碳"索意犹尽,智能"硅"来未可知(深度学习入门系列之二) 神经 ...
《OpenHarmony开源鸿蒙学习入门》-- 系统相机应用源码解析（一）
OpenHarmony开源鸿蒙学习入门–系统相机应用源码解析(一) 一.源码解析的目的: 为什么要去做源码解析这件事?我个人认为,首先可以提高我们对代码书写的能力,毕竟官方系统级的应用,会比demo的 ...

jsrender 学习入门 demo

jsrender 学习入门 demo相关推荐

最新文章

热门文章

jsrender 学习 入门 demo

jsrender 学习 入门 demo相关推荐

最新文章

热门文章

jsrender 学习入门 demo

jsrender 学习入门 demo相关推荐