Handlebars的简单使用

简介

  Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用”Logic-less template”(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。

安装

  Handlebars的安装非常简单,你只需要从Github下载最新版本,你也可访问下面网址获取最新信息:http://handlebarsjs.com
  目前handlebars.js已经被许多项目广泛使用了,handlebars是一个纯JS库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js

使用

1.Templates

  当您引入库之后,我们可以愉快的书写模板了,推荐的方式是通过特殊type的script标签来添加模板,type属性是非常重要的,否则浏览器会将它们看做javascrip解析。
  模板具有一个很容易理解的语法,可以使用html、普通文本和表达式,表达式通常被包含在两对或三对花括号里,可以包含变量或功能函数,模板需要编译之后才能使用。

image.png

2. Expressions

  表达式中的任何html代码将会被自动忽略,这是一个非常实用的性能,但是有的时候我们需要解析html,那么就要用三个花括号{{{ }}}

image.png

3.Context

  Handlebars利用了Mustache的强大特性,context就是其中之一。我们可以把需要传递的数据放在这个javascript对象中,使用#each、#with等方法可以方便的使用该对象的数据。

image.png

4.Helpers

  Handlebars不允许在模板中使用javascript,而是提供了一些列的功能函数(helpers),可以在模板中调用,方便代码重用和创造复杂模板。使用表达式调用helpers的格式类似如此,{{helpername}},同时也可以传递参数,{{helpname 12345}},开发新的helper,使用registerHelper function。

image.png

5. Block helpers

  Block helpers像普通的功能函数一样,但是有开始和结束标签(类似于内置的#if、#each等),可以修改包含的html的内容。创建更为复杂一些,当时功能更加强大。经常使用它们重复使用功能、创建一大段可重用的html等。同样使用Handlebars.registerHelper()创建block helper,不同的是我们需要使用第二参数,回调函数。

image.png

这只是基础部分,还要更深入的学习要访问官网

发布了14 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/Jsoning/article/details/78581800