Handlebars模板使用

阅读更多

Handlebars是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。而在grunt插件库中，有很多插件使用了Handlebars来为前端工程构建网页，比如在vigosmart工程中用到的 assemble插件。

assemble: {
                options: {
                    layoutdir: 'include/html/layouts/',
                    partials:'include/html/partials/**/*',
                    data:'include/html/data/*.{json,yml}'
                },
                site: {
                    expand: true,
                    cwd: 'include/html/pages/',
                    src: ['**/*.hbs'],
                    dest: 'public/'
                }
},

以上在grunt配置文件下配置assemble任务，当然这样生成的网页是静态的，我们在工程中一般会针对当前登录的用户信息生成个人网页，即通过取得的后台数据生成相应动态网页，这才是更为普遍的需求情况，所以我们可以写成js代码，例如一个按钮的点击相应函数，会发出网络请求，根据response附带数据利用template再编译出相应网页。

app.get('/archive', function (req, res) {
  Post.getArchive(function (err, posts) {
    if (err) {
      req.flash('error', err); 
      return res.redirect('/');
    }
    res.render('archive', {
      title: '存档',
      posts: posts,
      user: req.session.user,
      success: req.flash('success').toString(),
      error: req.flash('error').toString(),
      helpers: {
        showYear: function(index, options) {
          if ((index == 0) || (posts[index].time.year != posts[index - 1].time.year)) {
            return options.fn(this);
          }
        }
      }
    });
  });
});

以上就是get请求archive，根据返回的response查到archive模板，利用user信息去生成网页返回用户。而

res.render('archiv

后面跟随的son数据会传入archive模板。