Wix: заполните репитер внешним вызовом API
Я имею в виду следующее видео Как создать веб-приложение с доступом к внешнему API с помощью кода Wix и хотел бы знать, как я буду заполнять повторитель, а не заполнять тег абзаца, как показано в упомянутом выше видео на YouTube.
В основном вот псевдокод того, чего я хотел бы достичь:
If search box is equal to null or empty
Display all crypto currencie(s)
else
Display single crypto currency
@Sam извините, если я был не очень ясен, однако ваше наблюдение по моей проблеме выше на 100% верно. К сожалению, я пробовал несколько сценариев, чтобы добиться этого, но безрезультатно :-(!
Ответы 1
Ввод информации в повторитель не слишком отличается от того, что уже показано в примере. На самом деле, когда поле поиска пусто, 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]. Это дает нам конкретные данные, связанные с текущим элементом повторителя.
Большое спасибо, Сэм, я собираюсь попробовать прямо сейчас. Я приму ваш ответ, как только он заработает с моей стороны ;-).
Не совсем понятно, чего вы хотите добиться. Я думаю, вы хотите отображать повторяющийся элемент для каждой валюты, когда окно поиска пусто. Информация о каждом элементе ретранслятора будет отображаться в текстовом элементе, как в видео. И когда есть поисковый запрос, будет отображаться только один повторяющийся элемент с информацией в текстовом элементе. Это правильно?