Wix: заполнить ретранслятор внешним вызовом API - PullRequest
Новая
       11

Wix: заполнить ретранслятор внешним вызовом API

0 голосов
/ 30 июня 2019

Я имею в виду следующее видео Как создать веб-приложение с внешним доступом к API с использованием кода Wix и хотел знать, как я должен заполнить ретранслятор, а не заполнять тег абзаца, как показано наУпомянутое выше видео на YouTube.

По сути, это псевдокод того, чего я хотел бы достичь: 

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

1 Ответ

1 голос
/ 01 июля 2019

Размещение информации в ретрансляторе не слишком отличается от того, что уже показано в примере. На самом деле, когда поле поиска пустое, API возвращает массив, с которым нужно немного поиграть, чтобы заставить его работать с повторителем.

Итак, если вы добавили ретранслятор с идентификатором repeater1, который содержит текстовый элемент с идентификатором 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 для выбора текстового элемента. Это выбирает конкретный экземпляр текстового элемента в текущем элементе повторителя. Во-вторых, мы используем itemData вместо currencyInfo[0]. Это дает нам конкретные данные, связанные с текущим элементом повторителя.

...