handlebars的简单使用

Posted tina-12138

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了handlebars的简单使用相关的知识,希望对你有一定的参考价值。

模板引擎的作用:需要动态渲染大量html的时候,用js代码手动写入,不仅会失去代码高亮显示,而且在js代码中加入太多的html标签字符串会导致代码阅读的复杂度。此时就使用模板引擎

选择模板引擎的准则:

  1. 模板引擎的性能: 要快
  2. 跟据你的项目,看模板引擎服务端和客户端的兼容情况
  3. 希望语法抽象还是具体(既语法规则与html语法是否接近)

handlebars

npm i express-handlebars
const express = require(‘express‘)
var exphbs  = require(‘express-handlebars‘)
...
// 对模板引擎进行默认配置
app.engine(‘handlebars‘, exphbs())
// 将默认的引擎设置为handlebars
app.set(‘view engine‘, ‘handlebars‘)

布局文件:handlebars引擎默认的布局文件是/views/layout/main.handlebars文件

视图文件:放在/views文件加下面。直接通过res.render(‘filename‘)就可以找到

局部文件:放在/views/partials/文件夹下面,可以引入到其它的视图文件中,通过{{> filename}}的形式引入。

注释:{{! 注释内容}}

段落:只用在访问特定路由时,才会把代码片段插入到页面中。

// 在入口文件中加一个这样的片段
var handlebars = require(‘express-handlebars‘).create({
  defaultLayout:‘main‘,
  // extname: ‘.hbs‘,
  // default: 配置默认布局; 默认为views/layout/main.handlebars
  // extname: 配置文件扩展名;使handlebars文件可以使用这个扩展名
  helpers: {
      section: function(name, options){
          if(!this._sections) this._sections = {};
          this._sections[name] = options.fn(this);
          return null;
      }
  }
})
app.engine(‘handlebars‘, handlebars.engine)
app.set(‘view engine‘, ‘handlebars‘)

片段的内容写在具体的路由文件中

{{#section ‘head‘}}
	<!-- we want Google to ignore this page -->
	<meta name="robots" content="noindex">
	<style>
		h1 {
			color: red
		}
	</style>
{{/section}}

<h1>Test Page</h1>
<p>We‘re testing some jQuery stuff.</p>

{{#section ‘jquery‘}}
	<script>
		$(‘document‘).ready(function(){
			$(‘h1‘).html(‘jQuery Works‘);
		});
	</script>
{{/section}}

插入片段卸载布局文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Meadowlark Travel</title>
    {{{_sections.head}}}
    <script src="/js/jquery-1.12.2.js"></script>
</head>
<body>
    <h1>这是布局文件</h1>
   {{{body}}}
   {{{_sections.jquery}}}
</body>
</html>

{{body}}{{{body}}}的区别:前者会将其它在布局中引入的文件全部以不普通字符串的形式显示,而不会渲染成html。包括在其它视图中引入的局部视图

技术图片

语法块:

<h2>块级表达式</h2>
<ul>
  {{! 我是注释 --下面的语句块是用于循环数组}}
  {{#each tours}}
    {{! 这里的上下文就变成了tours的每一项}}
    <li> {{name}} - {{fee}}
      {{! ../表示返回上一级上下文,既顶级上下文--注意不是数组tours}}
      {{../currencies}}  {{! 会把currencies数组的每一项都打印一份}}
      {{#if ../currencies}}
        {{! ../../currency.name }}
        ({{name}})  {{! 在 if或者else的语句块中,会产生一个上级上下文的副本-可以理解为它的上下文和上一级上下文是一样的}}
        ({{../grade}})  {{! 1  再返回一级上下文就到顶级上下文了}}
      {{/if}}
    </li>
  {{/each}}
</ul>

{{#unless currencies}}
<p> All Prices in {{currency.name}}</p>
{{/unless}}

{{! if循环语句}}
{{#if specialPlace}}
  <p>{{specialPlace}} 是我上班的地方</p>
{{/if}}

{{#each currencies}}
  <p>条件一: {{.}}</p>
  {{else}}
  <p>条件二: {{currency.name}}</p>
{{/each}}

  • 循环

    {{#each 变量名}} ...循环体... {{/each}}:循环中的上下文变成循环中的每一项

  • 条件:

    {{#if}} ...条件判断的执行语句... {{/if}} : 条件中的上下文是上一级上下文的副本,仍然是上一级上下文

    {{#unless}}...{{/unless}}

  • 在某一个上下文中:通过../可以返回上一级上下文

以上是关于handlebars的简单使用的主要内容,如果未能解决你的问题,请参考以下文章

Handlebars 助手 - 返回 HTML 而不是文本

handlebars

Handlebars.Compile() 函数中的 C# 车把错误

handlebars的使用方法

Backbone.js + Handlebars 各

认识Handlebars