Wix：使用外部API调用填充中继器 [英] Wix: Populate repeater with external API call

问题描述

我指的是以下视频如何使用以下方法创建具有外部API访问权限的Web应用验证码&想知道我将如何填充中继器，而不是像上面提到的youtube视频所示那样填充段落标签。

I'm referring to the following video How to Create A Web App With External API Access using Wix Code & wanted to know how I would populate a repeater rather than populating a paragraph tag as shown in the youtube video mentioned above.

基本上，这是我想要的伪代码实现：

Basically here is the pseudocode of what I would like to achieve:

If search box is equal to null or empty
    Display all crypto currencie(s)
else
    Display single crypto currency

推荐答案

转发器中的info与示例已显示的信息没有太大不同。实际上，当搜索框为空时，API会返回一个数组，该数组只需稍作操作即可使其与转发器一起使用。

Putting the info in a repeater isn't too different than what the example already shows. Actually, when the search box is empty, the API returns an array that just needs a little playing with to get it to work with a repeater.

因此，假设您添加了一个ID为 repeater1 的转发器，其中包含一个文本元素为 result 的文本元素，您可以对页面代码。您完全不需要接触后端代码。

So, assuming you added a repeater with the ID repeater1 that contains a text element with the id result, you can make the following minor changes to the page code. You don't need to touch the backend code at all.

首先，在 button1_click 事件处理程序中， ll删除用API返回的数据填充text元素的代码。取而代之的是，我们将 _id 属性添加到每个货币对象（中继器必需），然后将该数据提供给中继器。

First, in the button1_click event handler we'll remove the code that populates the text element with the data returned from the API. Instead, we'll add an _id property to each currency object (required for the repeater) and then feed that data to the repeater.

export function button1_click(event) {
  getCryptoCurrencyInfo($w("#currencyInput").value)
    .then(currencyInfo => {
      // add an _id property to each currency object
      currencyInfo.forEach(item => item._id = item.id);
      // feed the data to the repeater
      $w('#repeater1').data = currencyInfo;
    } );
}

然后，我们可以获取用于填充文本元素的代码并将其粘贴 repeater1_itemReady 事件处理程序。此功能将对馈送到转发器的 data 属性的数组中的每个货币项目运行一次。确保使用属性面板将函数连接到匹配的重复事件。

Then, we can take the code for populating the text element and stick it in the repeater1_itemReady event handler. This function will run once for each currency item in the array fed to the repeater's data property. Make sure you use the properties panel to wire the function to the matching repeater event.

export function repeater1_itemReady($item, itemData, index) {
  $item("#result").text = "Name: " + itemData.name + "\n"
    + "Symbol: " + itemData.symbol + "\n"
    + "Rank: " + itemData.rank + "\n"
    + "Price (USD): " + itemData.price_usd + "\n"
    + "Market Capitalization (USD): " + itemData.market_cap_usd + "\n"
    + "Percent Change 1h: " + itemData.percent_change_1h + "\n"
    + "Percent Change 24h: " + itemData.percent_change_24h + "\n"
    + "Percent Change 7d: " + itemData.percent_change_7d;
}

请注意代码的两个细微更改。首先，我们使用 $ item 而不是 $ w 来选择文本元素。这将选择当前转发器元素中text元素的特定实例。其次，我们使用 itemData 代替 currencyInfo [0] 。这为我们提供了与当前转发器元素关联的特定数据。

Notice two subtle changes to the code. First, we use $item instead of $w to select the text element. This selects the specific instance of the text element in the current repeater element. Second, we use itemData instead of currencyInfo[0]. This gives us the specific data that is associated with the current repeater element.

这篇关于Wix：使用外部API调用填充中继器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！