標籤:php flow name 渲染 htm var 靜態 逸出字元 tput
/********************************************************************* * 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>
JavaScript HTML Handlebars Template