JavaScript HTML Handlebars Template
/********************************************************************* * 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>