JavaScript HTML Handlebars Template
/*********************************************************************
* JavaScript HTML Handlebars Template
* 说明:
* 最近在折腾PHP发现JavaScript能处理的事情远不止自己目前处理的事情,
* 发现有JavaScript HTML框架,这样在GitHub上配合JSON作为配置,就可以自由
* 组合静态网站了。
*
* 2017-8-24 深圳 龙华樟坑村 曾剑锋
********************************************************************/ 一、参考文档:
. Top Templating Engines for JavaScript To Improve and Simplify Your Workflow
https://colorlib.com/wp/top-templating-engines-for-javascript/
. Handlebars
http://handlebarsjs.com/
. Handlebars Getting Started
http://handlebarsjs.com/ 二、大致使用方法:
. 变量占位符: {{ 变量名 }}
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
. 将template放在<script>标签中,感觉在页面第一次渲染的时候是不错的方法:
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
. 编译template:
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
$(body).html(html);
. HTML转义字符:
使用{{}}会将HTML中的转义字符进行替换,使用{{{}}}就可以避免;
. template注释:
<div class="entry">
{{!-- only output author name if an author exists --}}
{{#if author}}
<h1>{{author.firstName}} {{author.lastName}}</h1>
{{/if}}
</div>
JavaScript HTML Handlebars Template的更多相关文章
- javascript模板引擎template.render使用
<script type="text/javascript"> function test(){ //你的方法 } </script> 如上代码:通常我们见 ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- JavaScript type="text/template"的用法
JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...
- javascript模板引擎template.js使用
到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...
- Javascript Module pattern template. Shows a class with a constructor and public/private methods/properties. Also shows compatibility with CommonJS(eg Node.JS) and AMD (eg requireJS) as well as in a br
/** * Created with JetBrains PhpStorm. * User: scotty * Date: 28/08/2013 * Time: 19:39 */ ;(function ...
- How can I pass data from Flask to JavaScript in a template?
https://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-flask-to-javascript-in-a-templ ...
- Javascript模板引擎handlebars使用实例及技巧
转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...
- Javascript模板引擎handlebars使用
源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620 代码示例: <!DOCTYPE html> <html> <he ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
随机推荐
- springboot2.1.3集成webservice及错误No operation was found with the name {...}解决办法
1.项目使用springboot 2.1.3版本,集成webservice使用的依赖如下 <parent> <groupId>org.springframework.boot& ...
- JDK 中的监控与故障处理工具-01
当给系统定位问题的时候, 我们经常需要了解并分析 JVM 的运行时状态 . 那应该从哪些方面入手呢? 答案就是从数据入手 . 这里的数据包括: GC日志,异常堆栈, 线程快照(threaddump) ...
- 转载 URL短地址压缩算法
文章转载http://www.nowamagic.net/webdesign/webdesign_ShortUrlInTwitter.php /// <summary> /// 生成sal ...
- hadoop 编译任意版本的eclipse 插件
github地址 下载ant并进行配置 http://ant.apache.org/bindownload.cgi 解压后, sudo gedit /etc/profile 进行设置: 添加expor ...
- 转载- ACM常见的各种说法
from : http://blog.csdn.net/qq_15015129/article/details/52738184 1.答案错误 —— wrong answer 就是最常见的.这个没办法 ...
- Linux查看和剔除当前登录用户
Linux查看和剔除当前登录用户 如何在linux下查看当前登录的用户,并且踢掉你认为应该踢掉的用户? 看了网络中的一些例子.在这里总结一下.主要用到的命令有,w,who,ps,kill,pkill ...
- 聊一聊Spring AOP
前两天,在给新入职的同事做技术介绍时,讲到spring的AOP.使我又一次认识到,对于AOP,特别是spring AOP的理解,虽然大家都能说上来几句,但是许多人认识并不太全面,甚至可以说是一知半解- ...
- linux下如何安装lua
1.下载lua包并解压 wget -c http://www.lua.org/ftp/lua-5.3.0.tar.gz tar zxvf lua-5.3.0.tar.gz 2.下载libreadli ...
- 1023: Pong’s Birds(概率)
1023: Pong’s Birds 时间限制: 1 Sec 内存限制: 128 MB提交: 94 解决: 21[提交][状态][讨论版] 题目描述 In order to train his b ...
- Emacs Helm: 使用关键字搜索、获取、执行任何东西
Helm 是一个emacs的软件包,定义了一个通用框架,交互式地.动态缩减式地使用关键字选择.获取.执行任何东西.比如: 执行emacs 命令 打开文件 查看man文档 执行grep操作 执行apt命 ...