将自定义元素连接到 wix 和 corvid 中的数据集答案

【问题标题】：Connect custom element to dataset in wix & corvid将自定义元素连接到 wix 和 corvid 中的数据集
【发布时间】：2020-11-17 10:54:07
【问题描述】：

有没有办法在自定义元素中使用数据集查询。在支持页面 (https://support.wix.com/en/article/custom-element-faqs) 上显示以下内容：

'我可以将自定义元素连接到集合中的数据吗？

是的，您可以使用 Corvid 的数据和数据集 API 将自定义元素连接到集合。'

但我不知道该怎么做。我曾尝试从自定义元素顶部的 wix-data 导入 wixData，但这会阻止我的自定义元素显示。

我需要根据数据集中的项目数创建复选框。我已经能够基于自定义元素中的静态数组创建复选框，但希望基于数据集创建复选框，因此我不必手动更改自定义元素中的数组。

以下是我在自定义元素中需要的内容。

import wixData from 'wix-data';

wixData.query('testdata')
        .limit(1000)
        .find()
        .then(results => {
            console.log(results.items)
        });

【问题讨论】：

标签： custom-element velo

【解决方案1】：

您需要通过属性传递复选框的数量。 Doc link

  $w('#customElementId').setAttribute('checkboxs-count', 5 );

然后在自定义元素上你需要监听属性变化。并据此更新 UI。

这是一个伪代码

wixData 模块仅存在于 Wix 代码库中。您需要使用 wixDatae 从数据库中导入数据，并通过 setAttribute 将数据传递给自定义元素。像这样

// page code
import wixData from 'wix-data';

wixData.query('testdata')
  .limit(1000)
  .find()
  .then(results => {
      // got the data from the database now pass the data to custom element using setAttribute method
      $w('#customElementId').setAttribute('checkboxs-count', results.length );
   });

并且您需要编写自定义元素代码来创建复选框，您可以通过自定义元素选择器上的.on() 方法来监听复选框是否更改并更新数据库。

所以，页面代码应该是这样的。

$w('#customElementId').on('checkbox-change', (event) => {
  console.log(`Checkbox Number ${event.detail.number} changed. Update Wix Database` );
  
});

希望这能解释如何与自定义元素进行数据库通信。

【讨论】：