Google AMP“启用”操作时当前事件的参考文本内容

Question

我正在尝试将我们的堆栈重写为AMP有效

我有以下模式：

1. 搜索栏可用于键入查询。
2. 键入文本（输入反跳）时，将显示（未隐藏） amp-list，并使用event.value （搜索栏输入值）的内容创建新的状态变量searchQuery。
3. 通过放大器状态组件（使用searchQuery作为参数）对端点A进行调用
4. 结果以链接的形式显示在放大器列表中，并带有一些文本内容（我们称其为title ）和空白的href（ ＃ ）

现在我想要的是，当您从列表中单击结果时，将搜索输入的值设置为clicked元素的值。 就像某种自动完成/选择器。

我尝试的是在每个列表项上使用tap:AMP.setState({searchQuery: event.value})的on属性

但是，当我单击结果时，搜索栏值始终设置为null 。

我尝试了： event.value event.target.value event.innerHTML event.innerContent event.text还尝试了将链接（ a ）替换为跨度按钮，结果是相同的。

使用AMP实际上可行吗？

Answer 1

您必须将input元素的值绑定到searchQuery才能起作用。 这是一个简化的示例（没有放大器清单）：

  <input type=text [value]=searchQuery on="input-debounced:AMP.setState({searchQuery: event.value})">

  <button on="tap:AMP.setState({searchQuery: 'test'})">
    Click
  </button>
  <div [text]=searchQuery></div>

Answer 2

我没有找到使用标准块类型html元素（如div，span，p，a ...）直接访问所需项目的元素值的方法。 但是我所做的（和工作的）是使用选择器，甚至是amp-selector，并简单地使用event.targetOption来获取被点击结果的值...

它不完全是我想要的，但在功能上等效，因此可以做到。

Answer 3

根据您的评论，我知道您将输入以外的其他html元素用作列表项，因此无法使用event访问相应的值。 尽管这不可能直接实现，但是可以使用AMP.setState来模仿此功能。 我认为您的amp-list模板如下所示：

<template type="amp-mustache">
    <span class="list-item">{{list-option}}</span>
</template>

您可以尝试使用模板内部的amp-mustache将选项值嵌入每个列表项的setState（）中，如下所示：

<template type="amp-mustache">
  <span class="list-item" on="tap:AMP.setState({searchQuery : {{list-option}} })" >{{list-option}}</span>
</template>