0

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

我有以下模式：

  1. 搜索栏可用于输入查询。
  2. 当您键入文本 (input-debounce) 时，会显示一个amp-list （未隐藏），并使用event.value的内容（搜索栏输入值）创建一个新的状态变量searchQuery
  3. amp-state组件调用端点A （以searchQuery作为参数）
  4. 结果在 amp-list 中显示为带有一些文本内容（我们称之为标题）和空白 href ( # )的链接

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

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

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

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

AMP 真的可以做到这一点吗？

4

3 回答 3

2

您必须将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>
于 2018-08-22T06:53:23.700 回答
0

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

它不完全是我想要的，但它在功能上是等效的，所以它会做。

于 2018-08-23T13:34:49.030 回答
0

根据您的评论，我了解到您正在使用除输入之外的一些 html 元素作为列表项，因此无法使用 event.get 访问相应的值。虽然这不可能直接实现，但可以使用 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>
于 2018-08-23T18:31:08.773 回答