handlebars
Posted 小蚊子飞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了handlebars相关的知识，希望对你有一定的参考价值。
- Handlebars 是 javascript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。
- 简单的说就是：Handlebars是一个很好的前后端的分离的方案
引入：
代码写在body下的script标签里面，并且id="template",type的类型为type="text/x-handlebars-template"
记得还要去js中去配置一些东东：
算了吧，来一篇直接粘贴过去就能拿来用的，以后一号拿来复习再巩固
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>handlebars</title> <style> .big { width: 100px; height: 100px; border: 1px solid green; border-radius: 100px; position: relative; } .small { width: 50px; height: 50px; border: 1px solid green; border-radius: 50px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align: center; line-height: 50px; } </style> </head> <body> <div id="container"></div> <script id="template" type="text/x-handlebars-template"> <h1>Hello</h1> <h2>Handlebars</h2> <table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>{{name}}</td> <td>{{age}}</td> <td>{{gender}}</td> </tr> </tbody> </table> <p>hello, {{name}}</p> <p>{{hello}}</p> <table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> {{#each listOfStudents}} <tr> <td>{{name}}</td> <td>{{age}}</td> <td>{{gender}}</td> </tr> {{/each}} </tbody> </table> <p>hello, {{{person.a.name}}}</p> <p>hello, {{person/a/name}}</p> <div class="big"> <div class="small"> 2 </div> </div> <div class="big"> <div class="small"> 3 </div> </div> <div class="big"> <div class="small"> 4 </div> </div> <!-- {{circle name}} {{circle name}} {{circle name}} --> </script> <script src="./handlebars-v4.0.5.js"></script> <script> // 获取模板的源代码 var source = document.getElementById(\'template\').innerHTML; // 把模板的源代码，编译成模板对象 var template = Handlebars.compile(source); // 创建helper Handlebars.registerHelper(\'circle\', function(data ) { // 告诉系统，这个返回值要解析成真正的标签 var obj = new Handlebars.SafeString(\'<div class="big"><div class="small">\' + data + \'</div></div>\'); return obj; }); // 通过模板对象，获取最终html代码 var html = template({ person: { a: { name: \'Tom<input type="text">\' }, b: \'hello\' }, name: \'Bob\', age: 20, listOfStudents: [ { name: \'bob\', age: 20, gender: \'male\' }, { name: \'tom\', age: 22, gender: \'male\' }] }); // console.log(html); // 把html代码插入到网页中去 document.getElementById(\'container\').innerHTML = html; // helper </script> </body> </html>
以上是关于handlebars的主要内容，如果未能解决你的问题，请参考以下文章
Handlebars的使用方法文档整理(Handlebars.js)