/*********************************************************************
* 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的更多相关文章

  1. javascript模板引擎template.render使用

    <script type="text/javascript"> function test(){ //你的方法 } </script> 如上代码:通常我们见 ...

  2. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  3. JavaScript type="text/template"的用法

    JavaScript type="text/template"相当于定义一个模板,如果没有使用html()方法的话,是显示不出来的,我们直接看例子(我是在tp框架的里面写的) &l ...

  4. javascript模板引擎template.js使用

    到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...

  5. 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 ...

  6. 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 ...

  7. Javascript模板引擎handlebars使用实例及技巧

    转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...

  8. Javascript模板引擎handlebars使用

    源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620 代码示例: <!DOCTYPE html> <html> <he ...

  9. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

随机推荐

  1. Spring的配置相关知识(学习spring boot的预备知识)

    我们经常说的控制反转(Inversion of Control-IOC)和依赖注入(dependency injection-DI)在Spring环境下是等同的概念,控制反转是通过依赖注入实现的.所谓 ...

  2. 转:MySQL 的show processlist

    processlist 命令的输出结果显示了有哪些线程在运行,可以帮助识别出有问题的查询语句,两种方式使用这个命令. 1.        进入 mysql/bin 目录下输入 mysqladmin p ...

  3. MongoDB 性能优化

    Read Preferences/读写分离 有时候为了考虑应用程序的性能或响应性,为了提高读取操作的吞吐率,一个常见的措施就是进行读写分离,MongoDB副本集对读写分离的支持是通过Read Pref ...

  4. Gym - 100712B Rock-Paper-Scissors

    https://vjudge.net/problem/Gym-100712B 题意: 石头剪刀布游戏. 给出一个玩家n局的出的顺序,现在另一个是这样出的,X+Y+Z=n,在前X轮出石头,中间Y轮出布, ...

  5. JavaScript高级程序设计-读书笔记(4)

    第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Do ...

  6. 深入浅出-Binding的源与路径

    1.把控件作为Binding源与Binding标记扩展<TextBox x:Name="textBox1" Text="{Binding Path=Value, E ...

  7. 可以,得驾证了\(^o^)/

    说实在话,我自认为我不太适合开车. 首先我有点晕车,在车上坐久了就头晕脑胀. 心里素质也不行,凡是遇到什么事了,就慌慌张张,手忙脚乱. 然后就是练车一点都不稳,每次练车都会有新问题出现. 先说一下我科 ...

  8. VS2017编译项目出现提示al.exe运行失败的解决方法

    VS2013中编译一切正常,用VS2017打开项目,某个类库出现al.exe运行失败的解决方法,事件查看器中这样描述 “C:\Program Files (x86)\Microsoft SDKs\Wi ...

  9. 数据挖掘之Python调用R包、函数、脚本

    Python中集成R :参考博客http://blog.csdn.net/weidelight/article/details/44946785

  10. 外层页面与iframe相互调用的方法

    iframe调用外层页面的方法: parent.func(); 外层页面调用里面的iframe中的内容方法:  $("iframe").contents().find(" ...