Handlebars expressions

Basic Usage 

1，最简单的handlebars 表达式

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

使用时，会在当前context里找名为title的property，替换之。

2，handlebars表达式也可以是一个带‘.’的paths

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

该表达式会在current context里查找article属性，在result里接着找title。如果没有传article变量，页面是不能接收到值，但也不会报错（underscore这种情况会报错）。

handlebars也支持用斜杠来替换上述"."的效果。

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

3，表达式可以是任意unicode character， 除了下面这些：

! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~

4，handlebars的表达式的值传到模板里时会对特殊字符进行escape，如果想要传过去的html代码能够以html的形式表现效果，而不是被当做字符串显示，就要用到{{{expression}}}。

Block Helpers

1，定义一个简单的块级helper

Handlebars.registerHelper('noop', function(options) {
  return options.fn(this);
});

这个noop helper 接受一个options对象，这个对象有一个fn方法，这个方法只是简单的执行模板编译和填值，它执行时会带有一个上下文，并且会返回一个字符串。

这里的this总是指向当前的上下文（使用已经编译好的模板时传入的context）。

使用 noop helper可以如下

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{#noop}}{{body}}{{/noop}}
  </div>
</div>

2，bold helper

Handlebars.registerHelper('bold', function(options) {
      return new Handlebars.SafeString(
        '<div style="font-weight:bold;">'
        + options.fn(this)
        +'</div>'
        );
    })

 

使用

<div class="body">
    {{#bold}}{{body}}{{/bold}}
</div>

生成的html代码如下

<div class="body">
     <div style="font-weight:bold;">This is my first post!</div>
</div>

3，with helper

Handlebars.registerHelper('with', function(context, options) {
   return options.fn(context);
});

接收#with 后面传入的参数，将其作为context传给options.fn函数，好比将#with内的部分作为子模板再传入子模板的上下文。

使用如下：

<div class="entry">
  <h1>{{title}}</h1>
  {{#with story}}
    <div class="intro">{{{intro}}}</div>
    <div class="body">{{{body}}}</div>
  {{/with}}
</div>

在context的嵌套较深的时候非常有用。

Simple Iterators

4，each helper

Handlebars.registerHelper('each', function(context, options) {
  var ret = "";

  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + options.fn(context[i]);
  }

  return ret;
});

每次执行options.fn(context[i])都对#each之间的模板进行填值并返回字符串。

5，list helper

Handlebars.registerHelper('list', function(context, options) {
  var ret = "<ul>";

  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + "<li>" + options.fn(context[i]) + "</li>";
  }

  return ret + "</ul>";
});

使用#list会返回一个序列。当然，在定义这个helper的时候，也可以使用别的库来让代码更简洁。

比如

Handlebars.registerHelper('list', function(context, options) {
  return "<ul>" + context.map(function(item) {
    return "<li>" + options.fn(item) + "</li>";
  }).join("\n") + "</ul>";
});

 6，conditionals

简单的#if

Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  }
});

如果要控制结构，比如如下使用情况

{{#if isActive}}
  <img src="star.gif" alt="Active">
{{else}}
  <img src="cry.gif" alt="Inactive">
{{/if}}

这时就需要在条件求值返回false时候执行的模板代码

 

Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

 

 暂时学到这里，后续下回再来...