用简单 JavaScript 连接组件
在卡拉云中，每一个组件均有一些属性，比如说对于文本输入框来说，用户输入的值 value 就是其中一个属性。请注意对于不同组件来说，同一个属性名的含义可能不一样，具体的组件使用和对应属性列表，请参考左侧导航栏中，各个组件的参考文档。
每一个组件或查询的属性均是 JavaScript 的对象，在任何可以键入代码的地方，你都可以用双大括号 {{ }} 来引用这些属性，我们把双括号中的内容称为代码块 (CodeBlock)。
📘代码块和代码补全点击任意组件后，在右侧的编辑器中，可以填入对应组件的代码块。比如在上图中，我们在文本框的值这个属性中引用了 nameInput，这样文本框中就会一直显示 nameInput 中输入的值
举个例子，如果我们需要在一个文本组件中，展示你的用户的输入，那么我们可以在文本组件的展示内容中，写入 {{textInput1.value}}，这样文本组件的值会引用用户输入的值，你就可以实时展示用户的输入。
使用代码块可以用来连接任意组件和查询。上面的例子中我们把一个输入框与文本框连接起来，但以下的示例场景中我们可以
- 将表格组件与数据库查询连接起来，用表格实时展示数据库中的内容
- 将图片组件与用户选择的上传文件连接起来，用来展示用户上传文件的预览
- 把地图组件与数据库中用户填入的地址连接起来，用来将用户的位置展示在地图上
👍代码块和代码补全与很多低代码甚至无代码工具不同，卡拉云的代码块可以让你搭建任意复杂度的业务后台，这得益在卡拉云中实现逻辑的方式，其实就是 JavaScript 代码。而 JS 代码的完备性，决定了它可以表达任意复杂的逻辑。
同时，由于 JavaScript 的极度普适性和简单性，初学程序员甚至不会写代码的产品经理、运营等均可以快速掌握如何在 JavaScript 中引用其它组件的属性等基本操作。
在代码块中，最常用的操作即引用操作。上文中的 {{ textInput1.value }} 即是引用组件名为 textInput1 的输入框中的 value 属性。对于 90% 的卡拉云应用来说，理解引用操作即可胜任绝大多数场景。我们了提供一些例子来说明如何使用卡拉云，只用引用操作，就可以实现复杂的业务后台。
用 JavaScript 处理简单的数据转换
如果你的数据逻辑非常复杂，我们通常推荐在后端 API 或 SQL 查询中，完成复杂的数据转换。比如说，如果在你的业务中，你需要将所有用户表与付款表连接(SQL join)起来，同时找出所有已经下单但还没有付款的用户，那么你可以使用一个 SQL 查询来将上述逻辑表达出来。
但有时，在前端你只需要做一些简单的转换，那么你可以使用简单的 JavaScript 转换 (Transformer) 来实现。举个例子，如果你有一个数组中，内容为用户购买的商品数，你只想展示购买过商品的用户，那么你需要做一个简单的过滤即可
{{ userPurchases.data.filter(x => x.count > 0) }}效果如下，可以看到我们过滤出了购买过商品的用户
简单的数据转换通常只需要用到 JavaScript 中的 map, filter 等函数。任何对编程稍有了解的程序员均可掌握使用。
用 JavaScript 处理复杂逻辑
🚧复杂逻辑上文中提到的数据转换和简单 JS 引用可以处理多数应用场景。如果你确认需要在前端使用复杂的逻辑，才需要参考本章节
当你的业务逻辑非常复杂，但又需要在前端处理时，你仍然可以在代码块中使用 JavaScript 进行计算。比如说下面的例子中，我们将表格数据 userPurchases 拿出来，检查顾客数，如果多于 100 个则显示 顾客有点多。当然这只是个简单例子，你可以在代码块中使用任意复杂的 JavaScript 代码来实现逻辑。
{{
(function(){
const allUsers = userPurchases.data;
if(allUsers.length > 100) {
return "顾客有点多"
}else {
return "顾客有点少"
}
})()
}}
注意，在这里的代码块格式为，定义一个函数，并立即调用这个函数(即 IIFE )