handlebars.js 入门(1)

最新推荐文章于 2024-08-10 07:10:30 发布

日向向阳1992

最新推荐文章于 2024-08-10 07:10:30 发布

阅读量1.6k

点赞数

分类专栏： js 框架文章标签： javascript handlebars

本文链接：https://blog.csdn.net/m0_37269630/article/details/57420687

版权

js 框架专栏收录该内容

1 篇文章

订阅专栏

handlebars.js是一个JavaScript语义模板库，用于分离data和view，适用于构建web模板。尽管功能相对单一，但适合小型数据的处理。本文介绍了如何引入库、创建模板、定义显示位置、预编译模板并匹配数据，还提到了内置的each、if/else、unless等helper，以及如何通过registerHelper自定义更复杂的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

handlebars.js是javascript的一个语义模板库，它通过将data 与 view分离来快速构建web模板，加载时预编译，一定程度上提高了代码的复用性和可维护性，提高敲代码的效率，总之，是一个轻量级的js 库，功能与现在流行的react 等相比，功能较为单一，但是，对于小型的数据而言，是一个不错的选择。

① 需要引入handlebars.js库

② 通过script标签创建一个模板template，模板内容自定义

③ 定义一个位置（eg:div），显示模板中的内容

④ 通过script标签，获取模板对象的内容-->compile预编译模板-->定义json数据--> 匹配json数据-->输出模板

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>handlebarsTest</title>
		<script type="text/javascript" src="js/handlebars-v4.0.5.js"></script>
	</head>
	<body>

	<div id="list"></div> // 模板输出位置

     <!--定义template-->
    <script id="entry-template" type="text/x-handlebars-template">
      <div class="myDiv">
      	<h2 class="title"> {{title}} </h2>
      	{{#persons}} 
      		<ul class="myUl">
      			<li> 姓名：{{this.name}} ，年龄：{{this.age}} , 生日:{{this.birth}}</li>
      		</ul>
      	{{/persons}}
      	<ul class="myUl">
      		
      	</ul>
      </div>
    </script>

   <!--获取模板，模板预编译，定义json数据,json数据匹配后，输出模板-->
   <script type="text/javascript">
  	var source = document.getElementById("entry-template").innerHTML;
  	var template = Handlebars.compile(source);
  	var data = {
  	   title: "person's information",
  	   persons:[
  	   		{name:"mike", age:12, birth:"11-12"},
  	   		{name:"mary", age:10, birth:"10-28"},
  	   		{name:"maply", age:16, birth:"2-22"}
  	   ]
    };
    document.getElementById("list").innerHTML = template(data);
  </script>
	</body>
</html>

handlebars 有一些基本的语法，如变量调用：{{data}},变量不用转义： {{{data}}}，block 局部作用域:{{#data}}开始，{{/data} }

结束，内置的helper：迭代：each ，条件渲染：if else ,unless ；嵌套式针对某一个数据对象：with

内置的helper相对来说，实现某些复杂的功能有些局限性，故可以通过Handlebars.registerHelper()自定义helper，实现较为复杂的

功能，<待续>

这篇文章很不错：http://www.tuicool.com/articles/fqQFN3