Template7 - 表达式介绍4（js表达式、js_compare表达式）

作者：hangge | 2016-09-06 08:50

Template7 提供了丰富的表达式语法（Expressions syntax）供我们使用，本文介绍其中的 {{js "expression"}}、{{#js_compare "expression"}}...{{/js_compare} 这2个表达式。

一、{{js "expression"}}

这个表达式允许我们执行一些简单的 JavaScript，从而直接在模板中修改/检查上下文数据，或者进行一些 JS 计算。

（1）假设上下文数据

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

（2）模板样例

<h3>{{title}}</h3>
<p>Price: ${{js "this.price * 1.2"}} </p>
<p>{{js "this.inStock ? 'In Stock' : 'Not in stock'"}} </p>

（3）输出结果

<h3>iPhone 6 Plus</h3>
<p>Price: $1200</p>
<p>In stock</p>

二、{{#js_compare "expression"}}...{{/js_compare}

这个表达式允许我们对上下文变量进行简单地比较。如果比较结果是“false”(或 "undefined" 或 "null" 或 "" 或 "0")，否会显示 {{else}} 分支内容。

1，单个条件比较

（1）假设上下文数据

{
  a: 5,
  b: 34
}

（2）模板样例

<p>{{#js_compare "a === b"}}A equals to B{{else}}A not equal to B{{/js_compare}} </p>

（3）输出结果

<p>A not equal to B</p>

2，多个条件比较

（1）假设上下文数据

{
  title: 'iPhone 6 Plus',
  price: 1000,
  color: 'white',
  memory: 32
}

（2）模板样例

<h3>{{title}}</h3>
<p>Price: ${{price}} </p>
<p>{{#js_compare "color === 'white' && memory > 16"}}Not in stock{{else}}In stock{{/js_compare}} </p>

（3）输出结果

<h3>iPhone 6 Plus</h3>
<p>Price: $1000</p>
<p>Not in stock</p>

HTML5 / CSS3