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>