HandleBars模板引擎中文文档---Handlebars.js 表达式

Handlebars.js 表达式

表达式是Handlebars模板的基本组成部分,你可以单独的以{{mustache}}的形式使用,传递给Handlebars,或者当做hash的参数。

基础:

最简单的Handlebars表达式是简单的标识

<h1>{{title}}</h1>

这个表达式的意思是:查到当前数据上下文的title属性。块helpers可以操作当前的数据上下文,但是不影响表达式的意思。

表达式也可以是用“点”分割的路径

<h1>{{article/title}}</h1>

这个表达式的意思是:查找当前数据上下文的 article属性,然后在结果中查找 title属性。handlebars也支持已经弃用 /分隔符,所以上面的表达式也可以写成

<h1>{{article/title}}</h1>

表达式可以包含任意的字符,除了:空格! " # % & ' ( ) * +, . / ; < = > @ [ \ ]^ ` { | } ~

如果表达式不是有效的字符,可以使用[:

    {{#each articles.[10].[#comments]}}
      <h1>{{subject}}</h1>
      <div>
        {{body}}
      </div>
    {{/each}}

上例中,模板会循环 articles[10]['#comments']

Handlebars会编译{{expression}}返回的值,如果你不想结果被编译,可以使用{{{

{{{foo}}}

helper:

helper调用是个简单的标识符,跟着零个或者多个参数(用空格分隔),每一个参数都是Handlebars表达式

{{{link story}}}

上例中,link是helper的名称,story是helper的参数。Handlebars就像上文所说的处理参数

    Handlebars.registerHelper('link', function(object) {
      return new Handlebars.SafeString(
        "<a href='" + object.url + "'>" + object.text + "</a>"
      );
    });

当helper返回html时,如果你不想被编码的话,需要返回Handlebars安全字符串。

也可以传递一个字符串当做helper的参数:

{{{link "See more..." story.url}}}

上例中,Handlebars会传给helper两个参数:字符串See more...和当前上下文的story.url

    Handlebars.registerHelper('link', function(text, url) {
      return new Handlebars.SafeString(
        "<a href='" + url + "'>" + text + "</a>"
      );
    });


你也可以使用同样的helper,通过动态字符串story.text


 
 
    • {{{link story.text story.url}}}

Handlebars helper 可以接受个任意顺序的“键值对”作为最后一个参数(文档中被称为hash)

{{{link "See more..." href=story.url class="story"}}}
hash的key必须是简单的标识符,value必须是表达式(就是字符串,路径,标识符)

 
 
  1.     Handlebars.registerHelper('link', function(text, options) {
          var attrs = [];
         
          for(var prop in options.hash) {
            attrs.push(prop + '="' + options.hash[prop] + '"');
          }
         
          return new Handlebars.SafeString(
            "<a " + attrs.join(" ") + ">" + text + "</a>"
          );
        });

Handlebars提供额外的元数据,例如hash,作为helper的最后一个参数。

Handlebars也提供了一种机制,调用helper with部分模板。块级helper以后可以调用零次或者多次,with任意的数据上下文。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值