详解handlebars+require基本使用方法

<div id="header"></div>
<div class="contact" id="contact"></div>
<div id="footer"></div>

<script id="contact-template" type="text/x-handlebars-template">
 <div class="tit">{{transformat info}}</div>
 {{#tit}}
 <span class="one">{{this}}</span> {{/tit}} {{#student}}
 <span class="one">{{@index}}</span><span class="one">{{name}}</span><span class="one">{{sex}}</span><span class="one">{{age}}</span><span class="one">{{sheight}}</span> {{/student}}
 </script>

Handlebars.registerHelper("transformat", function(value) {
 if(value == "通讯录") {
 return new Handlebars.SafeString("<font color='pink'>2016通讯录</font>")
 } else {
 return "old通讯录";
 }
 });

$('#contact').html(Handlebars.compile($("#contact-template").html())(data));

var contact=Handlebars.compile($("#contact-template").html());
$('#contact').html(contact(data));

var data = {
 "info": "通讯录",
 "tit": ["序号", "姓名", "性别", "年龄", "身高"],
 "student": [{
 "name": "张三",
 "sex": "男",
 "age": 18,
 "sheight": "175"
 }, {
 "name": "李四",
 "sex": "男",
 "age": 22,
 "sheight": "180"
 }, {
 "name": "妞妞",
 "sex": "女",
 "age": 18,
 "sheight": "165"
 }, {
 "name": "袁帅",
 "sex": "男",
 "age": 17,
 "sheight": "173"
 }]
 };

<script id="header-template" type="text/x-handlebars-template">
 <div class="header"><span>首页</span><span>联系我们</span><span>关于我们</span></div>
</script>

<script id="footer-template" type="text/x-handlebars-template">
 <div class='footer'>CopyRight© 2015-2016</div>
</script>

<script type="text/javascript" src="/UploadFiles/2021-04-02/require.js">

data-main其实是定义了一个入口文件，这个就不细说了，参考官方文档：
http://www.bootcdn.cn/require-text/readme/
这个是英文的，大家可以自行百度其他文档。
main.js的代码是自己写的，写入口，其他的不多说了，就说和引用有关的，看代码：


define(["text!../header.html", "text!../footer.html"], function(header, footer) {
 $('#header').html(header);
 $('#header').html(Handlebars.compile($("#header-template").html()));
 $('#footer').html(footer);
 $('#footer').html(Handlebars.compile($("#footer-template").html()));
});


text!../header.html中的text!表示把header.html文件引用进来以文本的形式，反正就是类似于php的include、require，把header.html和footer.html引用到index.html中。
这样一来，Handlebars.compile渲染模版就要放在main.js的define回调中去。
这样就能在任何页面引用Handlebars模版文件了，说到这，大家应该会明白我刚说的头和尾能放一个文件中吧，调用模版也是根据模版的ID调用，如果模版不多，放一个公用html文件就好。
好了，废话就说到这了，放上大家心心念念的完整代码了！拜~
完整代码下载地址：http://xiazai.jb51.net/201612/yuanma/handlebars_require_jb51.rar
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！