handlebars使用总结

缺乏、安全感 2022-05-27 04:38 252阅读 0赞

1.安装**express-handlebars**  :   npm install --save express-handlebars

2.引入使用    var handlebars = require('express-handlebars')**.create(\{ dafaultLayout: 'main'，extname: '.hds'\})** //指定默认主布局，模板文件的后缀名    express会在views子目录中查找，在views/layout里

**app.engine('handlebars', handlebars.engine)**

**app.set('view engine', 'handlebars'); **

3.布局标记： 三重大括号 **\{ \{ \{\}\}\}**，当渲染的视图中有HTML时，必须用三重括号才能渲染出来，否则会进行转义

4.渲染数据： **\{ \{\}\}**双重大括号

5.渲染顺序： **视图先渲染，然后在布局**

6.不需要加载默认布局： app.get('/foo', function(req, res) \{ res.render('foo', **\{ layout: null \}** \})

7. 需要加载其他布局时，指定layout参数的值即可 同上，**layout：‘layoutname’** 注意：**必须在views/layout中创建**该布局文件

8.局部文件：定义在**views/partials**文件夹中 ，在需要引入局部文件（组件）的地方使用**\{ \{> componentName\}\} **

当有**多级目录**时，可以使用**\{ \{> pathName/partialName\}\}**

9.客户端使用：var template =  Handlebars.compile(html) //先编译HTML

var test = template(source) //传入数据

$('body').html(test) //编译后的文本传入页面中

**Handlebars.compile 接受一个模板，返回一个方法，这个方法接受一个上下文参数，返回一个已渲染的字符串**

10.客户端使用2： 在模板中需要**至少对一个大括号进行转义**，但是在HTML中则不必

<script type="text/x-handlebars-template">

**\\\{ \{\#each list\}\}**

**                           <p>\\\{ \{this\}\}</p>**

**                      \\\{ \{/each\}\}**

</script>

11.当使用布局时，遇到需要在视图中加载一些东西或者一段script脚本时，可以使用**段落**

*      handlebars实例化的时候，添加一个section的辅助方法

var handlebars = require('express3-handlebars').create(\{

defaultLayout:'main'，

**helpers: \{**

**                    section: function(name, options)\{**

**                        if(!this.\_sections) **

**                        this.\_sections = \{\};**

**                        this.\_sections\[name\] = options.fn(this);**

**                        return null；**

**                    \}**

\}

\});

*      在视图中写需要加载的脚本   \{ \{\#section 'name'\}\}..................\{ \{/section\}\}
 *      在布局中，对应的位置写段落标记 \{ \{ \{\_section.name\}\}\} 这样就会向\{ \{ \{body\}\}\}一样，直接替换为要加载的脚本代码

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 Handlebars.java学习笔记

背景最近在做一个移动收银的项目，需要使用到银行的设备进行收银。由于使用的是银行设备，每次更新APP是都需要经过银行审核才能上线，这就加大了应用上线的复杂度。而且银行的p

ゞ浴缸里的玫瑰/ 2023年01月04日 13:25/ 0 赞/ 126 阅读

相关 Handlebars-Helper写法

html代码 //定义helper的方法1 <script> Handlebars.registerHelper("ID_1自定义",function(变量1

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 14:55/ 0 赞/ 267 阅读

相关 js中使用Handlebars.registerHelper的用法

一、返回字符串 js代码： var index= 0; Handlebars.registerHelper({ IndexFeature :

Love The Way You Lie/ 2022年12月24日 14:54/ 0 赞/ 96 阅读

相关 rancher/ui 中 Handlebars 模板中使用条件表达式

{ {if (and (eq a "hello") str )}} <div class="try-dashboard bg-second

红太狼/ 2022年12月01日 14:27/ 0 赞/ 138 阅读

相关 Handlebar之each循环使用

<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="

╰半夏微凉°/ 2022年08月01日 06:02/ 0 赞/ 265 阅读

相关 H5 Handlebars的简单使用

扫码关注公众号，不定期更新干活 ![这里写图片描述][20161031125201649] web 开发中，js 解析JSON 是经常的事情。非常繁琐。handlebar

待我称王封你为后i/ 2022年07月15日 02:55/ 0 赞/ 214 阅读

相关 Handlebars.js 块级Helpers

> 块级的Helpers可以在新的数据上下文下自定义迭代器和其他helpers。基础下面定义一个简单的块级Helpers <divclass="entry

系统管理员/ 2022年07月08日 14:29/ 0 赞/ 81 阅读

相关 Handlebars.js使用介绍

原文：[Learn Handlebars in 10 Minutes or Less][] 翻译：[前端开发whqet，][whqet] 意译为主，不当之处敬请指正。作者

女爷i/ 2022年06月02日 11:46/ 0 赞/ 204 阅读

相关 handlebar基本使用

each <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/h

末蓝、/ 2022年06月01日 23:37/ 0 赞/ 177 阅读

相关 handlebars使用总结

1.安装express-handlebars : npm install --save express-handlebars 2.引入使用 var handleb

缺乏、安全感/ 2022年05月27日 04:38/ 0 赞/ 253 阅读