指引网

当前位置: 主页 > 网页制作 > HTML >

Template7表达式之js表达式 、js_compare表达式

来源:网络 作者:佚名 点击: 时间:2017-07-06 20:59
[摘要]  下面我们来看一篇关于Template7表达式之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>

------分隔线----------------------------