我想在amp日期选择器中显示某些日期的最低票价。我可以显示静态文本，但不知道如何显示动态值。到目前为止，我已经完成了以下工作(对模板中的日期和状态中的值进行硬编码，但这将在实际环境中从json中获取(。
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Travel date picker example</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="amp-experiments-opt-in" content="amp-date-picker">
<style amp-custom>
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style></noscript>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<label for="Departure"><span>Departure</span></label><br />
<amp-date-picker id="DepartureDate"
type="single"
mode="overlay"
layout="container"
on="select: AMP.setState({ departure: event.date, dateType1: event.id });
activate: AMP.setState({
fare:1000
})"
format="DD-MM-YYYY"
input-selector="[name=Departure]"
class="example-picker space-between">
<div class="icon-input"></div>
<div class="ampstart-input">
<input class="border-none p0"
name="Departure"
placeholder="Pick a date">
</div>
<template type="amp-mustache"
date-template
dates="2018-07-21"
id="spooky">
<span>
{{DD}} <br />
<small>$ {{fare}}</small>
</span>
</template>
</amp-date-picker>
</body>
</html>
这显示的是日期和$符号，但不是金额，请让我知道如何实现这一点。
首先使用amp-bind(添加与数据绑定和表达式的自定义交互(和带有JSON端点的"amp-state"，用户可以在交互后获得最新数据。由于amp-bind语句不会在页面加载时进行评估，因此更新后的状态只有在用户交互后才可用，这在特定产品可用性等用例中效果良好(在本例中为最低公平(。此链接详细介绍了如何在用户交互后显示动态内容。例如，请参阅以下帮助资源和GitHub链接：
- https://github.com/ampproject/amphtml/blob/master/examples/travel.amp.html
-
https://codelabs.developers.google.com/codelabs/amp-e-commerce/index.html?index=..%2F..%2Fio2018#6
-
https://github.com/ampproject/amphtml/blob/master/examples/date-picker.amp.html