当前位置: > > > Template7 - 表达式介绍4(js表达式 、js_compare表达式)

Template7 - 表达式介绍4(js表达式 、js_compare表达式)

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>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作。

打赏支持
评论0