最近在折腾PHP发现JavaScript能处理的事情远不止自己目前处理的事情,发现有JavaScript HTML框架,这样在GitHub上配合JSON作为配置,就可以自由组合静态网站了。
/*********************************************************************
* JavaScript HTML Handlebars Template
* 说明:
* 最近在折腾PHP发现JavaScript能处理的事情远不止自己目前处理的事情,
* 发现有JavaScript HTML框架,这样在GitHub上配合JSON作为配置,就可以自由
* 组合静态网站了。
*
* 2017-8-24 深圳 龙华樟坑村 曾剑锋
********************************************************************/
一、参考文档:
1. Top 10 Templating Engines for JavaScript To Improve and Simplify Your Workflow 2017
https://colorlib.com/wp/top-templating-engines-for-javascript/
2. Handlebars
http://handlebarsjs.com/
3. Handlebars Getting Started
http://handlebarsjs.com/
二、大致使用方法:
1. 变量占位符: {{ 变量名 }}
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
2. 将template放在<script>标签中,感觉在页面第一次渲染的时候是不错的方法:
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
3. 编译template:
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
$(body).html(html);
4. HTML转义字符:
使用{{}}会将HTML中的转义字符进行替换,使用{{{}}}就可以避免;
5. template注释:
<div class="entry">
{{!-- only output author name if an author exists --}}
{{#if author}}
<h1>{{author.firstName}} {{author.lastName}}</h1>
{{/if}}
</div>