Editor X中为Repeater子元素赋值文本遇阻求助

问题描述 #

我用Repeater展示产品和价格，想给价格添加货币符号做格式化，尝试用Velo的onItemReady方法，按照文档用$item选择Repeater子元素，但代码无效。相同的格式化逻辑在全局作用域下能正常运行，代码如下：

$w('#repeater1').onItemReady(($item, itemData, index) => {
    let repeatedElement = $item("#price20");
    repeatedElement.text = itemData.price.toLocaleString('en-US', { style: 'currency', currency: 'EUR' })
    console.log(itemData.price)
    console.log(repeatedElement.text)
});

排查与解决方案 #

1. 校验Repeater子元素ID的正确性 #

确保Repeater模板里的价格元素ID确实是price20：

• 打开Wix编辑器，选中Repeater内的价格文本元素
• 在右侧属性面板里确认ID拼写完全一致，没有大小写错误或多余字符

2. 确保itemData.price是数字类型 #

如果数据源中price字段存储的是字符串（比如从CSV导入或手动输入的文本），直接调用toLocaleString会失效。先将其转为数字：

$w('#repeater1').onItemReady(($item, itemData, index) => {
    const repeatedElement = $item("#price20");
    // 转换为数字，处理空值或非数字情况
    const price = Number(itemData.price) || 0;
    repeatedElement.text = price.toLocaleString('en-US', { style: 'currency', currency: 'EUR' });
    console.log(price, repeatedElement.text);
});

3. 检查数据源字段名是否匹配 #

确认数据源中存储价格的字段名确实是price，如果字段名是productPrice或其他名称，itemData.price会返回undefined，导致格式化失败。

4. 验证元素是否成功选中 #

在回调中增加元素存在性判断，避免因元素未加载完成导致的错误：

$w('#repeater1').onItemReady(($item, itemData, index) => {
    const repeatedElement = $item("#price20");
    if (repeatedElement) {
        const price = Number(itemData.price) || 0;
        repeatedElement.text = price.toLocaleString('en-US', { style: 'currency', currency: 'EUR' });
    } else {
        console.error(`无法找到ID为price20的元素，索引：${index}`);
    }
});

5. 确认代码放置位置 #

确保这段代码是写在页面的onReady函数内，Repeater需要页面加载完成后才能正确绑定事件：

$w.onReady(function () {
    $w('#repeater1').onItemReady(($item, itemData, index) => {
        const repeatedElement = $item("#price20");
        const price = Number(itemData.price) || 0;
        repeatedElement.text = price.toLocaleString('en-US', { style: 'currency', currency: 'EUR' });
    });
});

内容的提问来源于stack exchange，提问作者Yadid Hadad