Wix：使用外部 API 呼叫填充中继器

Question

我指的是以下视频 How to Create A Web App With External API Access using Wix Code 并且想知道如何填充转发器而不是填充段落标记，如上面提到的 youtube 视频中所示。

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

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

Answer 1

将信息放入转发器与示例中已经显示的内容没有太大区别。实际上，当搜索框为空时，API returns 一个数组，只需要稍微玩一下就可以让它与中继器一起工作。

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

首先，在 button1_click 事件处理程序中，我们将删除使用 API 返回的数据填充文本元素的代码。相反，我们将向每个货币对象添加一个 _id 属性（中继器需要），然后将该数据提供给中继器。

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 属性的数组中的每个货币项，此函数将运行一次。确保使用属性面板将函数连接到匹配的转发器事件。

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 来 select 文本元素。此 select 是当前转发器元素中文本元素的特定实例。其次，我们使用 itemData 而不是 currencyInfo[0]。这为我们提供了与当前转发器元素关联的特定数据。

Wix：使用外部 API 呼叫填充中继器

Wix: Populate repeater with external API call

content-management-system

velo