用简单 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 )