连接组件和使用 JavaScript

用简单 JavaScript 连接组件

在卡拉云中,每一个组件均有一些属性,比如说对于文本输入框来说,用户输入的值 value 就是其中一个属性。下图中展示一个文本输入框中的 5 个属性,请注意对于不同组件来说,这里的属性和含义可能不一样。

组件的属性

每一个组件,查询的属性均是 JavaScript 的对象。在任何可以键入代码的地方,你都可以用双大括号 {{ }} 来引用这些属性,我们把双括号中的内容称为代码块 (CodeBlock)。

简单的JS引用

📘
代码块和代码补全

点击任意组件后,在右侧的编辑器中,可以填入对应组件的代码块。比如在上图中,我们在文本框的值这个属性中引用了 nameInput,这样文本框中就会一直显示 nameInput 中输入的值

举个例子,如果我们需要在一个文本组件中,展示你的用户的输入,那么我们可以在文本组件的展示内容中,写入 {{input1.value}},这样文本组件的值会引用用户输入的值,你就可以实时展示用户的输入。

JS引用展示

使用代码块可以用来连接任意组件和查询。上面的例子中我们把一个输入框与文本框连接起来,但以下的示例场景中我们可以

  1. 将表格组件与数据库查询连接起来,用表格实时展示数据库中的内容
  2. 将图片组件与用户选择的上传文件连接起来,用来展示用户上传文件的预览
  3. 把地图组件与数据库中用户填入的地址连接起来,用来将用户的位置展示在地图上

与很多低代码甚至无代码工具不同,卡拉云的代码块可以让你搭建任意复杂度的业务后台,这得益于 JavaScript 的强大。

同时,由于 JavaScript 的极度普适性和简单性,初学程序员甚至不会写代码的产品经理、运营等均可以快速掌握如何在 JavaScript 中引用其它组件的属性等基本操作。

在代码块中,最常用的操作即引用操作。上文中的 {{ input1.value }} 即是引用组件名为 input1 的输入框中的 value 属性。对于 90% 的卡拉云应用来说,引用操作即可胜任。我们了提供一些例子来说明如何使用卡拉云,只用引用操作,就可以实现复杂的业务后台。

用 JavaScript 处理简单的数据转换

如果你的数据逻辑非常复杂,我们通常推荐在后端 API 或 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 "顾客有点少"
    }
  
  })()
}}

复杂的JavaScript逻辑

注意,在这里的代码块格式为,定义一个函数,并立即调用这个函数(即 IIFE )

© 2021 卡拉云 Built with ❤️ in Beijing

京ICP备15049164号-9