Question

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

我有以下模式：

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

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

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

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

我尝试过：event.value event.target.value event.innerHTML event.innerContent event.text 还尝试将链接（ a ）替换为 span 按钮，并得到相同的结果。

使用AMP实际上可行吗？

Answer 1

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

searchQuery

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>