handlebars使用总结

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}}}一样，直接替换为要加载的脚本代码