[英]Reference text content of current event with Google AMP “on” action
I am trying to rewrite our stack to be AMP valid 我正在尝试将我们的堆栈重写为AMP有效
I have the following pattern : 我有以下模式:
Now what I would like is that when you click a result from the list, the value of the search input be set the value of the clicked element. 现在我想要的是,当您从列表中单击结果时,将搜索输入的值设置为clicked元素的值。 Like an autocomplete/selector of some sort.
就像某种自动完成/选择器。
What I tried is having an on attribute on each list item with tap:AMP.setState({searchQuery: event.value})
我尝试的是在每个列表项上使用
tap:AMP.setState({searchQuery: event.value})
的on属性
I tried : event.value
event.target.value
event.innerHTML
event.innerContent
event.text
Also tried replacing the link ( a ) to a span a button and such, same result. 我尝试了:
event.value
event.target.value
event.innerHTML
event.innerContent
event.text
还尝试了将链接( a )替换为跨度按钮,结果是相同的。
Is this actually possible with AMP ? 使用AMP实际上可行吗?
You have to bind the input
element's value to searchQuery
for this to work. 您必须将
input
元素的值绑定到searchQuery
才能起作用。 Here is a simplified sample (without an amp-list): 这是一个简化的示例(没有放大器清单):
<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>
I did not find a way to access the element value of the needed item directly, with a standard block type html element (like div, span, p, a...). 我没有找到使用标准块类型html元素(如div,span,p,a ...)直接访问所需项目的元素值的方法。 However what I did (and works) is to use a selector, even amp-selector and simply use the event.targetOption to get the value of the result being clicked...
但是我所做的(和工作的)是使用选择器,甚至是amp-selector,并简单地使用event.targetOption来获取被点击结果的值...
Its not exactly what I wanted but it is functionally equivalent so it will do. 它不完全是我想要的,但在功能上等效,因此可以做到。
Based on your comments I understand that you are using some html element other than an input, as a list item and therefore can't access corresponding value using event. 根据您的评论,我知道您将输入以外的其他html元素用作列表项,因此无法使用event访问相应的值。 Although this is not directly possible, this functionality can be mimicked by using AMP.setState.
尽管这不可能直接实现,但是可以使用AMP.setState来模仿此功能。 I assume your amp-list template looks something like follows :
我认为您的amp-list模板如下所示:
<template type="amp-mustache">
<span class="list-item">{{list-option}}</span>
</template>
You can try embedding the option value in the setState() for each list item using amp-mustache inside the template as follows : 您可以尝试使用模板内部的amp-mustache将选项值嵌入每个列表项的setState()中,如下所示:
<template type="amp-mustache">
<span class="list-item" on="tap:AMP.setState({searchQuery : {{list-option}} })" >{{list-option}}</span>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.