本文档以通用标题组件请求数据并分发给数字翻牌器多行文本组件完成数据更新为例,为您介绍如何使用节点编程功能通过合并请求进行数据分发的方法。

前提条件

准备好您的交互需求。

本案例的交互需求为:通用标题组件请求数据,并将请求到的数据分发给数字翻牌器多行文本组件。

背景信息

本案例的实际应用场景为:多个组件共用一个数据请求,产生单个组件请求数据并分发给其他组件。

操作步骤

  1. 在大屏编辑器页面搭建所需要的通用标题多行文本数字翻牌器组件,详情请参见添加组件
  2. 数字翻牌器的配置面板中,清空 标题名、前缀 内容和后缀 内容配置项。
    配置数字翻牌器
    注意 此步骤为可选步骤,您可以根据需求自定义标题名、前缀或后缀内容。
  3. 通用标题组件放置于画布外,并修改组件的数据内容。
    通用标题数据内容
    本案例中,通用标题组件配置的数据如下。
    [
        {
            "num": "123",
            "text": "这是多行文本组件",
            "value": "接收数据组件"
        }
    ]
    注意 本案例内的通用标题组件只用于请求数据,放置于画布外,在预览发布时不会显示在大屏上。
    添加组件
  4. 组件配置完成后,单击大屏编辑页面右上角的配置节点编程图标。
    配置节点编程图标
  5. 节点编程配置页面,将左侧的通用标题多行文本数字翻牌器节点拖至画布中,并进行连线。
    本案例需要进行两次连线:
    • 通用标题当数据接口请求完成时事件与数字翻牌器导入数据接口动作连线。
    • 通用标题当数据接口请求完成时事件与多行文本导入数据接口动作连线。
  6. 在连线中添加两个转换器,分别命名为分发给数字翻牌器分发给多行文本
    具体操作方法请参见配置节点编程
    转换器添加完成后,最终效果如下图所示。
    组件连线样式
  7. 配置转换器。
    1. 右键单击名称为分发给数字翻牌器的转换器,选择编辑
    2. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,完成后单击保存
      数字翻牌器转换器代码
      当前转换器的示例代码如下。
      return [{
        value:data[0].num
      }];
    3. 使用同样的方式配置分发给多行文本转换器。
      多行文本转换器代码
      当前转换器的示例代码如下。
      return [{
        value:data[0].text
      }];
  8. 转换器配置完成后,单击节点编程配置页面右上角的应用图标,将交互效果应用到大屏项目中。
  9. 单击页面左上角的返回图标,返回大屏编辑器页面。单击预览,查看数据分发效果。
    交互展示