Handlebars.js的下载及使用示例

官方下载地址：Handlebars.js

<!DOCTYPE html>
<html>
<head><title>Handlebars Expressions Example</title>
</head>
<body>
<h1>Handlebars Expressions Example!</h1>
<!--this is a list which will rendered by handlebars template.    -->
<div id="list">
</div><script type="text/javascript" src="script/jquery-1.3.1.js"></script>
<script type="text/javascript" src="script/handlebars-v1.3.0.js"></script><script id="people-template" type="text/x-handlebars-template">{{#people}}<div class="person"><h2>{{first_name}} {{last_name}}</h2><div class="phone">{{phone}}</div><div class="email"><a href="mailto:{{email}}">{{email}}</a></div><div class="since">User since {{member_since}}</div></div>{{/people}}
</script><script type="text/javascript">$(document).ready(function() {// compile our templatevar template = Handlebars.compile($("#people-template").html());var data = {people: [{ first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },{ first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },{ first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },{ first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },{ first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }]};$('#list').html(template(data));});
</script>
</body>
</html>

Handlebars.js的下载及使用示例相关推荐

Mars3D功能示例原生JS版下载运行
首先建议您学习浏览一遍我们功能示例的源码(源码中会有大量注释),阅读源码时可以结合查阅API文档来理解类及方法的作用和参数说明等. #项目介绍这是一个基于原生JS 开发的 mars3d 示例项目. ...
handlebars.js {{#if}}中的逻辑运算符是有条件的
本文翻译自:Logical operator in a handlebars.js {{#if}} conditional Is there a way in handlebars JS to inc ...
js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需 ...
Handlebars.js 模板引擎
介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模 ...
Handlebars.js使用介绍
原文:Learn Handlebars in 10 Minutes or Less 翻译:前端开发whqet, 意译为主,不当之处敬请指正. 作者简介:Danny Markov ,Tutorialzi ...
阿里云OSS服务端签名前端JS直传（php）示例
阿里云OSS服务端签名后前端JS直传(php)示例需求:服务端上传图片太慢,需要使用前端直传的方式.但前端把阿里云的 AccessKey ID 和 AccessKey Secret 放在前端文件中会 ...
PDF.js 分片下载的介绍2:分片下载demo
上一个章节,简要说了以下分片下载的几个特性.今天主要用示例说明一下pdf.js分片下载. 服务器环境: php7.2 nginx 1.14 ubuntu 18.04 测试浏览器:谷歌浏览器 70.0. ...
JavaScript实战篇 -ajax方式实现js打包下载文件
一.问题描述在我们日常开发中,会遇到批量下载方面的问题;如上图所示,我们要批量下载图片,接下来我们就模拟实现这个功能,并将下载文件打包下载; 二.准备工作 2.1 JSZip JSZip 是一个 j ...
Mustache.js和Handlebars.js有什么区别？
本文翻译自:What are the differences between Mustache.js and Handlebars.js? Major differences I've seen ar ...

Handlebars.js的下载及使用示例

Handlebars.js的下载及使用示例相关推荐

最新文章

热门文章