Hogan模板引擎使用教程(webpack环境下)

 浆糊之家   2018-03-21 19:58   1,323 views 热度值

Hogan模板引擎

简介:Hogan是一个非常简单的模板引擎,可以把它理解成Mustuche语法的编译器。Hogan简单到只有六七条语法,用hogan渲染html模板不用操作dom会更方便。

 

Hogan模板引擎

  • Hogan的安装和使用
  • Hogan语法
  • 语法实例

Hogan的安装和使用

通过npm安装hogan:

注意: npm里还有一个叫hogan的组件,是对hogan.js做的一个套壳的包装,同学们如果使用hogan出错的话,可以换成这里的hogan.js,还是原厂的好!除了引用名称,其他用法都是完全一样的。

Hogan语法

语法实例

转义的变量:

说明:这就是读取一个变量,假如name是个html片段,这里会对html编码,如果放到dom里,就显示成了一段html代码。

 

不转义的变量:

说明:大括号能怎么样?还是读取一个变量,只不过name是个html片段的话,这里不对html编码,放在dom里就是一段dom。

 

列表循环 / 真值判断:

 

空列表 / 非真值判断:

 

枚举的当前元素:

 

注释:

这些就是hogan的常用语法,还有个引入片段的语法基本用不到,这里就不讲了。

然后会是什么呢?然后就没有然后了,就这些!

总结:Hogan,不就这么几句


{{data}} 转义的变量

{{{data}}} 不转义的变量

{{#list}} {{/list}} 列表循环 / 真值判断

{{^list}} {{/list}} 空列表 / 非真值判断

{{.}} 枚举的当前元素

{{!}} 我是注释

 

看过这篇以后,别再说Hogan我不太会用。

 

 

PREVIOUS:已经是最后一篇了

 发表评论


表情