Mavo 表达式既然我已向您说明了如何声明和操作数据项，下面让我们来谈谈自动化。大多数应用程序都在代码中内置了自动操作。您可以使用 Mavo 的表达式语言 MavoScript 来启用此自动化。
在本示例中，我想添加指向 Poetry Book Club 页面的链接，用于向组织者发送电子邮件并且主题行包含当前书籍的名称。为启用此自动化，我会在 Mavo 应用程序的 main 元素中添加以下片段。
<a href="mailto:poclub@example.com?subject=[title]">Contact us about this meeting</a>
|
[title] 部分是 Mavo 的缺省表达式语法，您可以在 HTML 中将其替换为 title 数据项的值。 Mavo 的表达式十分灵活。例如，如果希望电子邮件的主题始终为大写，那么可以使用以下代码：
<a href="mailto:poclub@example.com?subject=[uppercase(title)]">Contact us about this meeting</a>
|
此处，uppercase(title) 是 Mavo 表达式函数，用于对 title 的值进行操作，并将其全部转换为大写。 在此示例中，将标题“Ndewo, Colorado”转换为了“NDEWO, COLORADO”。Mavo 表达式函数有许多，它们分别可用于操作文本字符串、列表、日期和时间以及用于数学运算。您也可以使用习惯符号来表示大多数算术运算，具体如下所示。您通常需要编写可操作 HTML 文档对象模型 (DOM) 的 JavaScript 来启用这样一个功能，Mavo 因此可以立即简化开发人员的工作。
放置 Mavo 应用程序无需在最外层的元素上声明 Mavo 应用程序。列表 2 是 bookclub1.5.html，这是 的变体。此处，在 div 元素上声明 Mavo 应用程序，该元素位于主标题和一些附加描述性文本之后。
清单 2. 浏览器中的 Poetry Book Club 通知页面，包含备用的 Mavo 应用程序位置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The poetry book club</title>
<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script>
</head>
<body>
<main>
<h1>The poetry book club</h1>
<p>Where we take our time with each tasty rhyme</p>
<div mv-app="poetryclub" mv-storage="local">
<p>
<label>Title: </label>
<span property="title">Ndewo, Colorado</span>
</p>
<img property="cover" src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />
<p>
<label>Meeting date: </label>
<time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
</p>
</div>
</main>
</body>
</html>
|
图 5 显示了浏览器中首次加载的 bookclub1.5.html。请注意 Mavo 应用程序栏相对于声明该应用程序时所用元素的位置。
图 5. 备用 Mavo 应用程序位置
数字和日期表达式及样式让我们重新审视 Mavo 图像属性，看看如何使用 Mavo 表达式对图像执行有趣的操作。您可以将任何图像上传至 Poetry Book Club 页面。为了添加定制的图像大小，我将 img 元素替换为以下片段：
<img property="cover" style="height: [height * 2 + 200]px;"
src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />
<div>
<input type="range" property="height" />
</div>
|
我在此处引入了 height 属性，将该属性声明为 HTML 滑块输入。Mavo 将此解释为一个控件，用于在用户滑动时设置从 0 到 100 的值。img 现在具有新的 style 属性，用于根据 Mavo 表达式通过 CSS 声明来设置图像的高度。该表达式是基于高度的简单数学公式：[height * 2 + 200]。在此例中，图像范围为 200（输入滑块处于最低设置）到 400（输入滑块处于最高设置）。
Mavo 中的条件表达式当距离开会时间不足一周时，我想用黄色突出显示会议日期以引起注意。为此，我将当前的日期部分替换为以下片段。
<p style="background-color: [if(days(meeting - $today) < 7, yellow, white)];">
<label>Meeting date: </label>
<time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
</p>
|
if() 函数使用了两到三个自变量。第一个自变量是一个条件表达式。
- 如果其值为 true 或非零，那么会将第二个自变量设置为结果值。
- 如果条件为 false 或零，并且有第三个自变量，那么该第三个自变量就用作结果值。
在此例中，条件为 if(days(meeting - $today) < 7。如您所见，meeting 属性是会议的可编辑日期。$today 是 Mavo 自动提供的多个属性之一，它始终设置为 Web 浏览器确定的当前日期。
两个日期值相减会生成相差的秒数，days() 函数将使用该秒数，并计算等同的天数。如果结果小于 7 天（请注意，标准的 HTML 需要将 < 转义为 <），那么条件为 true，并且会将第二个自变量 yellow 设置为结果。否则，结果为 white。在此例中，将页面背景样式设置为白色是一个好主意，但这是一个细节问题。
颜色自变量看起来像是属性名称。当 Mavo 发现看似属性名称的内容时，会将其替换为属性的值（如果存在这样的属性）。否则，它会逐字处理文本。如果想要确保将可能看似属性的内容处理为字面文本，您可以用引号把它引起来。以下条件采用相同的方式运行：[if(days(meeting - $today) < 7, 'yellow', 'white')]。 |
