/********************************************************************* * JavaScript HTML handlebars Template * Description: * Recently in tossing PHP found that JavaScript can handle things far more than what they are currently dealing with, * found there is a JavaScript HTML framework, so on GitHub with JSON as a configuration, you can freely * combine static site. * * 2017-8-24 Shenzhen Longhua gen Zengjianfeng ************************************************************* *******/First, reference documents:1. TopTenTemplating Engines forJavaScript to Improve and simplify Your Workflow .https://colorlib.com/wp/top-templating-engines-for-javascript/ 2. Handlebars http://handlebarsjs.com/ 3. Handlebars Getting Started http://handlebarsjs.com/second, the approximate use of the method:1. Variable placeholder: {{variable-name}}<divclass="entry"> class="Body">{{body}}</div> </div>2. Place template in <script>tag, it feels like a good way to do this when the page is first rendered:<script id="entry-template"Type="text/x-handlebars-template"> <divclass="entry"> class="Body">{{body}}</div> </div> </script>3. Compile the Template:varSource = $ ("#entry-template"). html (); varTemplate =handlebars.compile (source); $ (body). HTML (HTML); 4. HTML escape Character: use {{}} to replace escape characters in HTML, which can be avoided by using {{{}}};5. Template comments:<divclass="entry"> {{!--only output author nameifAn author exists--}} {{#ifAuthor}} {{/if}} </div>
JavaScript HTML Handlebars Template