node的模板：Handlebars-白红宇

node的模板：Handlebars

阅读量：6220 次

发布时间：2019-06-21

本文共 3761 字，大约阅读时间需要 12 分钟。

　　(1)①如果上下文对象是：{ name: 'Buttercup' },

模板是Hello, {

{name}}!

　　　　将输出Hello,Buttercup!

②如果上下文对象是：{ name: 'Buttercup' },要想输出不转义的变量，需要这么写：Hello, {

{

{name}}}!

　　　　三个{}保证html标签被解析

　　　 ③注释：{

{! super-secret comment }}

　　　　　假如这是一个服务器模板，第一个注释将不会被传递到浏览器

　　(2)块级表达式：

{　　currency: {                   name: 'United States dollars',                   abbrev: 'USD',　　}, 　　tours: [                { name: 'Hood River', price: '$99.95' },                { name: 'Oregon Coast', price, '$159.95' },       　　],　　specialsUrl: '/january-specials',　　currencies: [ 'USD', 'GBP', 'BTC' ],}

//使用 ../ 来访问上一级上下文 ,if块会产生一个新的上下文，因此如果在each块中使用if，需要注意上下文问题


     
          {
    {#each tours}}    
              {
    {name}} - {
    {price}}        {
    {#if ../currencies}}            ({
    {../../currency.abbrev}})        {
    {/if}}    
    {
    {/each}}
     
    {
    {#unless currencies}}    All prices in {
   {currency.name}}.
{
    {/unless}}{
    {#if specialsUrl}}    Check out our specials!
 {
    {else}}    Please check back often for specials.
{
    {/if}}    {
    {#each currencies}}        {
   {.}}    {
    {else}}        Unfortunately, we currently only accept {
    {currency.name}}.    {
    {/each}}

在 if 和 each 块中都有一个可选的 else 块(对于 each,如果数组中没有任何元素,else 块就会执行)。我们也用到了 unless 辅助方法,它基本上和 if 辅助方法是相反的:只有在参数为 false 时,它才会执行。

(3)在express中使用/不使用布局：布局文件在express的views/loyouts目录下

　　var handlebars = require('express3-handlebars') .create({ defaultLayout: 'main' }); //默认该js下的页面视图使用此布局

　　app.get('/foo', function(req, res){

　　　　res.render('foo');

　　});

//如果你根本不想使用布局(这意味着在 视图中你不得不拥有所有的样板文件),可以在上下文中指定 layout: null:app.get('/foo', function(req, res)    { res.render('foo', { layout: null });});//或者,如果你想使用一个不同的模板,可以指定模板名称:这样就会使用布局 views/layouts/microsite.handlebars 来渲染视图了。app.get('/foo', function(req, res){     res.render('foo', { layout: 'microsite' });});

（4）局部组件：如果在网站中有一部分组件<div>等需要在不同的页面复用，需要单独拿出来作为局部组件，在express架构下默认目录views/partials/

　　创建weather.handlebars文件：


           
                {
          {#each partials.weather.locations}} 　　　　
            
                     　　
             {
         {name}}
        　　
              　　　　
            
       
                   {
          {weather}}, {
          {temp}}     {
          {/each}}    
            Source: Weather Underground

在主程序js文件中模拟假数据：

//获取天气信息函数,模拟数据function getWeatherData(){    return {        locations: [            {                name: 'Portland',                forecastUrl: 'http://www.wunderground.com/US/OR/Portland.html',                iconUrl: 'http://icons-ak.wxug.com/i/c/k/cloudy.gif',                weather: 'Overcast',                temp: '54.1 F (12.3 C)',            },            {                name: 'Bend',                forecastUrl: 'http://www.wunderground.com/US/OR/Bend.html',                iconUrl: 'http://icons-ak.wxug.com/i/c/k/partlycloudy.gif',                weather: 'Partly Cloudy',                temp: '55.0 F (12.8 C)',            },            {                name: 'Manzanita',                forecastUrl: 'http://www.wunderground.com/US/OR/Manzanita.html',                iconUrl: 'http://icons-ak.wxug.com/i/c/k/rain.gif',                weather: 'Light Rain',                temp: '55.0 F (12.8 C)',            },        ],    }}

然后创建一个中间件给 res.locals.partials 对象添加这些数据

app.use(function(req, res, next){    if(!res.locals.partials) res.locals.partials = {};    res.locals.partials.weather = getWeatherData();    next();});

结束后，例如我们将组件放在main.handlwbars里面：

{

{> weather}}

语法{

{> partial_name}}可以让你在视图中包含一个局部文件。express3-handlebars会在 views/partials 中寻找一个叫作 partial_name.handle-bars 的视图

组件可以放在views/partials/...目录下

转载于:https://www.cnblogs.com/jakii/p/5135985.html

你可能感兴趣的文章