`
yuyongkun4519
  • 浏览: 43086 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Express handlebars模板常用语法

 
阅读更多

今天学一下express-handlebars模板引擎的语法结构

 

1,直接输出变量

<body>
    <!-- Calls `foo` helper, overridden at render-level. -->
    <p>{{foo}}</p>
    <!-- Calls `bar` helper, defined at instance-level. -->
    <p>{{bar}}</p>
</body>

 

2,if...else语句

<body>
  {{#if isActive}}
    <h1>Home</h1>
  {{else}}
    <h3>About</h3>
  {{/if}}
</body>

 

3,由于handlebars不支持逻辑非("!"),下面是与if相反的语句

{ {#unless license} }
  <h3 class="warning">This entry does not have a license!</h3>
{ {/unless} }

 等价于

{ {#if license} }
{ {else} }
   <h3 class="warning">This entry does not have a license!</h3>
{ {/if} }

 

4,数据循环each,类似于js中for循环

 1)遍历数组

<ul>
{ {#each items} }
    <li>item</li>
{ {/each} }
</ul>

item相当于数组items中的元素 

 

也可以用 as |xxx|的形式给变量起别名

<ul>
{ {#each items as |value,key|} }
    <li>value</li>
{ {/each} }
</ul>

 2)遍历对象,这时@key表示属性名,this表示对应的值

{ {#each object} }
  { {@key} }: { {this} }
{ {/each} }

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics