Template7 Mobile-first JavaScript Template Engine

一个移动优先的模板引擎

Template7 移动优先的额模板引擎

因为是开发Swiper滑动插件的那个公司开发的，在javascript 周刊中推荐到了，所以看了看。

网站地址
 Github

Template7是一个移动优先的javascript模板引擎，使用了Handlebars近似的语法，它是Framework7的默认模板引擎。它体积超小（压缩约6kb）,又超级快(在移动Safari中比Handlebars快2-3倍)。

Download and install Template7

第一部下载我们需要的Template7文件：

可以从Github仓库下载Template7
也可以通过Bower安装，命令为 $ bower install template7

在下载的/安装的包中我们需要 dist/folder文件夹下的 Javascript文件(.js)

并将需要的脚本引入到我们的 HTML 文件中:

<html>
    <head>
        ...
        <script src="path/to/template7.min.js"></script>
    </head>
    <body>
        ...
    </body>
</html>      

Templates

Template7 模板看起来像Handlebars模板，它是常规的HTML但嵌套了handlebars表达式：

<div class="list-block">
  <ul>
    
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title"></div>
      </div>
    </li>
    
  </ul>
</div>

Expressions syntax

Template7支持以下语法的表达式：

Variables:

`` - 普通变量.在当前上下文打印”title”变量值
`` - 普通变量.在父上下文中打印”title”变量值
`` - 普通变量.在父上下文的父上下文中打印”title”变量值
`` - 普通变量.打印等于当前上下文的变量
`` - 普通变量.打印当前上下文中的”person”变量的”name”属性值
`` - 普通变量.同样但是上下文是父上下文
`` - 连接到额外的数据变量.这类数据变量可以在helpers中使用

Block expressions：

`` - 开始块表达式
`` - 开始 “对立” 的块表达式 (如果支持)
`` - 结束块表达式
`` - 开始块表达式通过传递 reverse:true 哈希参数

Helpers

Helpers 能够作为普通表达式和块表达式：

`` - 在当前上下文执行 “join” helper并传递 “myArray” 参数和 delimiter:', ' 哈希参数

Compilation and Rendering

Template7 是一个全局的 Window 函数

首先我们需要传递string 模板，例如，我们保存在script标签下:

<script id="template" type="text/template7">
    <p>Hello, my name is  </p>
</script>

现在我们要在javascript中转换，Template7将转换我们的模板string为普通的Javascript函数:

var template = $$('#template').html();

// compile it with Template7
var compiledTemplate = Template7.compile(template);

// Now we may render our compiled template by passing required context
var context = {
    firstName: 'John',
    lastName: 'Doe'
};
var html = compiledTemplate(context);

现在，html 将包含：

<p>Hello, my name is John Doe</p>

Built-In Helpers

Template7 Helpers 像是传递上下文中的预定义函数.

……

`` 是一个块级表达式，可以遍历数组或者对象属性来遍历items.

下边附加的变量在 helper 中可用：

@index - item 的键值，只在数组中。
@first - 数组的第一个元素，只在数组中。
@last - 数组的最后一个元素，只在数组中。
@key - 当前对象的属性名称，只在对象中。

Template ->	Context ->	Output
Iterate through Array items
``` Here are the list of people i know: ``` ``` ```	```{ people : [ { firstName: 'John', lastName: 'Doe' }, { firstName: 'Mark', lastName: 'Johnson' }, ] }```	``` Here are the list of people i know: ``` ``` John Doe Mark Johnson ```
``` Here are the list of people i know: . ```	```{ people : ['John Doe', 'Mark Johnson'] } ```	``` Here are the list of people i know: 0. John Doe 1. Mark Johnson ```
Iterate through Object properties
``` Car properties: : ```	``` { props: { power: '150 hp', speed: '200 km/h', } }```	``` Car properties: power: 150 hp speed: 200 kn/h ```
expression.
``` Car properties: : No properties ```	```{ props: { power: '150 hp', speed: '200 km/h', } }```	``` Car properties: power: 150 hp speed: 200 kn/h ```
``` Car properties: : No properties ```	```{}```	``` Car properties: No properties ```

……

helper 当传递的上下文非 “false”（或”undefined”或”null”或”“或”0”）是渲染内容，其他情况它渲染相反的内容，通过可选的传递到中的表达式：

Template ->	Context ->	Output
``````	```{ active: true, title: 'Link', }```	```Link```
expression.
``` Hello, my name is . I have hobby I don't have hobby ```	```{ name: 'John Doe', hobby: false }```	``` Hello, my name is John Doe. I don't have hobby ```

Template ->

Context ->

Output

``````

```{ active: true, title: 'Link', }```

```Link```

expression.

```

Hello, my name is .

I have hobby

I don't have hobby

```

```{ name: 'John Doe', hobby: false }```

```

Hello, my name is John Doe.

I don't have hobby

```

……

helper 渲染内容当传递的上下文是 “false” (or “undefined” or “null” or “” or “0”) , 其他情况下它渲染可选的传递到中的表达式：

Template ->	Context ->	Output
``` Car has power and maximum speed ```	```{ props: { power: '150 hp', speed: '200 km/h', } }```	``` Car has 150 hp power and 200 km/h maximum speed ```

…

当你在表达式上下文中传递块表达式，如果上下文是Array 它将像一样工作，如果是Object 它将像一样工作：

Template ->	Context ->	Output
``` - years old ```	```{ people: [ { name: 'John Doe', age: 18 }, { name: 'Mark Johnson', age: 21 } ] }```	``` John Doe - 18 years old Mark Johnson - 21 years old ```
``` Car has power and maximum speed ```	``` { props: { power: '150 hp', speed: '200 km/h', } }```	``` Car has 150 hp power and 200 km/h maximum speed ```

####

这个helper 会将使用传递的符号将Array连接为字符串

Template ->	Context ->	Output
``` "" TV Show Was released in year Genres: ```	```{ title: 'Friends', year: 2001, genres: ['comedy', 'drama'] }```	``` "Friends" TV Show Was released in year 2001 Genres: comedy, drama ```

Template ->

Context ->

Output

```

"" TV Show

Was released in year

Genres:

```

```{ title: 'Friends', year: 2001, genres: ['comedy', 'drama'] }```

```

"Friends" TV Show

Was released in year 2001

Genres: comedy, drama

```

####

该helper返回转译后的HTML 字符串.它只转译以下字符 : ` < > “ & `

</tr> </tbody> </table> #### 这个行内 helper 允许执行一些简单的Javascript在模板中修改/检查上下文：

Template ->	Context ->	Output
``` ```	```{ title: 'Paragraphs', body: 'We need to use tags to add paragraphs in HTML', }``` </td>	``` Paragraphs We need to use <p> tags to add paragraphs in HTML ```

Template ->

Context ->

Output

```

```{ title: 'Paragraphs', body: 'We need to use

tags to add paragraphs in HTML', }``` </td>

```

Paragraphs

We need to use <p> tags to add paragraphs in HTML

```

Template ->	Context ->	Output
``` Price: $ ```	```{ title: 'iPhone 6 Plus', price: 1000, inStock: true }```	``` iPhone 6 Plus Price: $1200 In stock ```

Template ->

Context ->

Output

```

Price: $

```

```{ title: 'iPhone 6 Plus', price: 1000, inStock: true }```

```

iPhone 6 Plus

Price: $1200

In stock

```

#### ... 块级 helper 来简单比较上下文变量.它渲染内容当 Javascript表达式非"false"时(or "undefined" or "null" or "" or "0")，其他情况它渲染中的表达式

Template ->	Context ->	Output
``` Price: $ Not in stockIn stock ```	```{ title: 'iPhone 6 Plus', price: 1000, inStock: true }```	``` iPhone 6 Plus Price: $1000 Not in stock ```
A equals to BA not equal to B ```	```{ a: 5, b: 34 }```	``` A not equal to B ```

Template ->

Context ->

Output

```

Price: $

Not in stockIn stock

```

```{ title: 'iPhone 6 Plus', price: 1000, inStock: true }```

```

iPhone 6 Plus

Price: $1000

Not in stock

```

A equals to BA not equal to B

```

```{ a: 5, b: 34 }```

```

A not equal to B

```

注意在 js 和 js_compare helper 中你应当使用 this.variableName 而不是 variableName ### Using Custom Helpers Template7 允许通过下边的方式来注册自定义helpers: Template7.registerHelper(name, helper) * name - string - helper name * helper - function - helper function to handle passed context Helper 函数可以接收多个需要的参数，如上下文，字符串和哈希数据。下边是一个注册“”的helper的例子: Template7.registerHelper('if', function (condition, options) { // "this" in function context is equal to the expression execution context // "condition" argument contains passed context/condition /* @options contains object with the wollowing properties and methods: "hash" - contains passed hash object with parameters "fn" - method to pass helper block content further to compilier "inverse" - method to pass helper block inverse () content further to compilier "data" - contains additional expression data, like @index for arrays or @key for object */ // First we need to check is the passed context is function if (typeof condition === 'function') condition = condition.call(this); // If context condition if (condition) { // We need to pass block content further to compilier with the same context and the same data: options.fn(this, options.data); } else { // We need to pass block inverse () content further to compilier with the same context and the same data: options.inverse(this, options.data); } }); 或者是 helper: Template7.registerHelper('join', function (arr, options) { // First we need to check is the passed arr argument is function if (typeof arr === 'function') arr = arr.call(this); /* Passed delimiter is in the options.hash object: console.log(options.hash) -> {delimiter: ', '} */ // And return joined array return arr.join(options.hash.delimiter); }); 我们可以创建helper来创建 Franework7 的列表块链接: Template7.registerHelper('link', function (url, title, options){ var ret = '

' + '' + '

' + '

' + title + '

' + '

' + '' + '

'; return ret; });

Template ->	Context ->	Output
``` ```	```{ links: [ { url: 'http://google.com', title: 'Google' }, { url: 'http://idangero.us', title: 'iDangero.us' }, ] }```	``` Google iDangero.us ```

### Remove Custom Helpers Template7 允许通过以下方法移除自定义helper: Template7.unregisterHelper(name) name - string - helper name ### Global Context Template7 同样支持全局上下文，它可以在任意上下文中访问到. 我们可以在 `Template7.global` 属性中指定它： Template7.global = { os: 'iOS', browser: 'Chrome', username: 'johndoe', email: 'john@doe.com' }; 在模板中连接它我们需要使用`` 变量:

Hello, . Your email is

### Access To Root Context 有些时候我们需要连接到传递给模板的根上下文. 这时候我们需要使用``变量。当我们深入多层上下文时很有用： { persons: [ { name: 'John', hobby: ['Cars', 'Food'] }, { name: 'Kyle', hobby: ['Travel', 'Puzzles'] }, ], showHobby: true }

Hobby:

### Partials Template7 允许通过partials来复用模板，Partials是指可以被其他模板调用的正常Template7模板。我们可以注册 /解除注册 partials 通过下边的方法: Template7.registerPartial(name, template) - register partial name - string - partial name helper - string - partial template Template7.unregisterPartial(name) - unregister partial name - string - partial name 之后我们就可以使用特殊helper `` 来使用partials Template:

') Apply to the template this context: { users: [ { firstName: 'John', lastName: 'Doe', bio: 'Lorem ipsum dolor' }, { firstName: 'Jane', lastName: 'Doe', bio: 'Donec sodales euismod augue' } ], admins: [ { firstName: 'Mike', lastName: 'Doe', bio: 'Lorem ipsum dolor' }, { firstName: 'Kate', lastName: 'Doe', bio: 'Donec sodales euismod augue' } ] } And we will get the following output:

John Doe

Lorem ipsum dolor
Jane Doe

Donec sodales euismod augue

Mike Doe

Lorem ipsum dolor
Kate Doe

Donec sodales euismod augue

Written on December 21, 2015

Template7 Mobile-first JavaScript Template Engine

Template7 移动优先的额模板引擎

Download and install Template7

Templates

Expressions syntax

Variables:

Block expressions：

Helpers

Compilation and Rendering

Built-In Helpers

……

……

……

…

"" TV Show

"Friends" TV Show

Paragraphs

iPhone 6 Plus

iPhone 6 Plus

Hobby:

John Doe

Jane Doe

Mike Doe

Kate Doe