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 ...
随机推荐
- 4.9版本的linux内核中温度传感器adt7461的驱动源码在哪里
答:drivers/hwmon/lm90.c,这个文件中支持了好多芯片,内核配置项为CONFIG_SENSORS_LM90 Location: -> Device Drivers -> H ...
- windows环境下mysql的解压安装以及备份和还原
系统环境为server2012 1.下载mysql解压版,解压安装包到指定目录 2.在以上目录中,复制一份my-default.ini文件,重命名为my.ini,进行如下修改(按照需要): [mysq ...
- JAVA 单向链表
package com.session.link; /** * 单向链表 */public class LinkedList<T> { private Node head;//指向链表头节 ...
- C# 自动触发鼠标、键盘事件
要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...
- cocos2d-x入门三 分层设计框架
helloworld就是一个完整的框架,大致分为四个层次如下: 导演-------场景------图层-----精灵 Director-----Scene----Layer----Sprite 导演类 ...
- 'webpack' 不是内部或外部命令解决办法以及npm配置
昨天在笔记本上安装webpack,按照教程下来,使用webpack命令行,报错:'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件.网上有大量的配置方法与解决办法,找了好久才成功 ...
- thinkphp getField("xxxxx", true); 得到一个字段所有值组成的的数组
很多时候我们只需要一张表里某个字段的值,组成的数组 $Channel = D('channel');$channelList = $Channel->order('user_name')-> ...
- VS2013 The Debugger Resource DLL is out of date
折磨了我一天的问题,亲们,记住,下载vs2013 update5 ,别的方法不用试了,完全没用!
- mina-deploy(3800🌟) 快速部署工具
Mina (3800
- 第三章 如何使用Burp Suite代理
Burp Proxy 是Burp Suite以用户驱动测试流程功能的核心,通过代理模式,可以让我们拦截.查看.修改所有在客户端和服务端之间传输的数据. 本章主要讲述以下内容: Burp Proxy基本 ...