在码匠中,组件和查询都有自己的事件 (Event),事件可以有条件地触发某一或某些动作。可以设置执行查询、控制组件、全局提示等动作以响应事件。 一个用户交互友好的、符合逻辑的可用应用,离不开合理的事件设置,它将所有组件和查询串联起来,形成一个联通有机的整体。本文档将介绍组件和查询的事件设置。
组件和查询的事件
组件的事件
在码匠中,任何可以响应用户输入或操作的组件在属性面板的交互模块中都有一个事件属性。因为各个组件的用途不同,所以其事件也不同,详情见码匠官网 -> 组件页。例如:按钮只有一个单击事件;输入框有内容改变、聚焦、失焦和提交事件。下图展示的是输入框组件的事件编辑菜单:

事件因用户与应用的交互而触发,而事件的动作则是预先设置的、对用户交互的响应。根据不同需求,可以添加多项事件。如下图所示,对于按钮组件 button1
,为其添加了两项单击事件,分别触发了两种动作:单击触发执行 query1
和单击触发全局提示。

查询的事件
对于查询,其可选事件有两个:成功后和失败后,分别对应查询执行成功和执行失败。

对于所创建的任何一条查询,其查询编辑器的最下方都有一个事件模块,与组件类似,在这里可以添加成功后或失败后事件,并绑定事件动作,详情可参考成功/失败后的事件动作文档。
事件动作设置
码匠提供的事件动作有以下九种:

执行查询
在组件或者查询的事件部分选择新建,动作设为执行查询,最后可以在下拉框中,选择要执行的查询名称。

控制组件
在码匠中,除了编写 JavaScript 控制组件之外,您还可以通过触发事件来控制组件。选择事件后,将动作选为控制组件,再选择相应的组件和对应的方法等。


运行 JavaScript
选择动作为运行 JavaScript,可以编写多行 JS 代码来完成复杂操作,支持访问数据、调用组件方法、运行其它查询并传递参数等。详情可参阅 JavaScript 查询。

设置临时状态
选择动作为设置临时状态,可以在事件触发后更新临时状态的值。支持 setValue
和 setIn
两种赋值方法,详情可参阅临时状态文档。

打开应用页面
使用打开应用页面动作,您可以与其他应用进行连接、实现页面跳转,从而实现多页面交互。其中 URL Query 参数和 URL Hash 参数为可选项:
参数 | 作用 |
---|---|
URL Query 参数 | 将以 ?key1=value1&key2=value2... 形式追加到选择的所要打开应用的 url 后面。 |
URL Hash 参数 | 将以 #key1=value1&key2=value2... 形式追加到选择的所要打开应用的 url 后面。 |
示例:在「企业人员信息表」应用中,点击表格列「部门」的任一链接即可跳转到「部门人员信息看板」应用,并展示对应部门人员信息。


- 企业人员信息表应用将当前行的部门信息
{{currentRow.department}}
作为 URL Query 参数传递给部门人员信息看板应用。 - 部门人员信息看板应用全局变量
url
字段将自动解析应用请求的 URL。示例中,url.query
值为{"department":"研发部"}
,然后可在查询中通过{{url.query.department}}
获取到对应部门信息。
全局提示
添加一项事件后,选择动作为全局提示,再填写和设置相应的提示文案、提示等级和持续时间即可。

💡说明
查询执行成功和执行失败的全局提示,可直接在查询的通知面板进行设置,详情可参阅通知面板。
打开链接
将动作选为打开链接,再填写要打开链接的 URL ,可选是否要在新标签页打开。

复制到剪贴板
将动作选为复制到剪贴板,再填写要复制的文本。

下载
选择事件后,将动作选为下载,再填写下载的文件数据来源、文件名,选择文件类型。这样当事件触发后,就会有一个下载文件的动作执行。

执行条件
事件可以有条件地触发某一动作,在事件编辑框的执行条件中编写 JavaScript 表达式,这样动作仅当执行条件的计算结果为 true 时才运行,例如:{{checkbox1.value}}
,{{query1.data.length > 0}}
。
下方给出一个实际业务中使用执行条件配置的场景。用户信息表单既可以用来更新表格当前选中用户的数据,也可以用来创建新用户。这里提交按钮 button1
设置了两个事件动作:单击执行查询 updateUser
(更新现有用户),以及单击执行查询 createUser
(创建新用户)。两个事件动作的执行条件根据表单中 ID 字段 idInput.value
存在与否进行判断:ID 存在时 {{!!idInput.value}}
执行 updateUser
;ID 不存在时 {{!idInput.value}}
执行 createUser
。



防抖/节流
防抖和节流属于查询编辑器的高级选项,它们的作用都是降低动作的运行频率。
防抖指的是延迟动作,即:动作不会在事件发生之后立刻执行,而是在设定的防抖时间过去之后才会执行,如果在这段时间内事件再次发生,则防抖时间重新计时。例如:当用户在搜索栏(一个输入框组件)中更改搜索文本时,会触发执行一个查询。如果该查询运行成本很大,您不希望在每输入一个字符时都触发它,就可以通过设定防抖时间来延迟查询的执行。这样就能实现:当用户停止输入后才会触发查询。这也是较优的提高性能和节省资源的方式。
节流指的是在指定的时间内只执行一次动作。例如:用一个按钮组件控制更新用户数据,按钮单击事件触发执行查询 UpdateUserData
,该查询的运行成本较大,较好的方式是限制其在指定时间内只能运行一次,而非用户每点击一次按钮就运行一次(当发生用户频繁点击的情况)。遇到类似这种情况,您就可以设定其节流时间来节约运行成本。
您可以在输入框中直接填写数字来设定防抖或节流时间,单位均为毫秒。
