时间戳

首页 > 解决方案 > 向 amp-date-picker 模板添加其他内容

amp-html - 向 amp-date-picker 模板添加其他内容

问题描述

我想在 amp-date-picker 中显示某些日期的最低票价。我能够显示静态文本，但不知道如何显示动态值。到目前为止，我已经完成了以下操作（硬编码模板中的日期和状态中的值，但这将在真实环境中从 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-htmlamp-date-picker

解决方案

首先使用amp-bind（通过数据绑定和表达式添加自定义交互性）和带有 JSON 端点的“amp-state”，用户可以在交互后获取最新数据。由于amp-bind语句不会在页面加载时进行评估，因此更新后的状态仅在用户交互后可用，这适用于特定产品可用性等用例（在这种情况下为最低公平）。此链接更多地讨论了如何在用户交互后显示动态内容。示例请参考以下帮助资源和 GitHub 链接：

推荐阅读