开发者学堂课程【低代码认证-第一章:项目评选系课程：1.4 项目评选系统的数据陈列展示】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1007/detail/15056
项目评选系统的数据陈列展示
内容介绍
一、 页面之间的数据联通
二、 相关的接口功能介绍
三、 容器实现循环渲染分析
四、实操演练
继续学习项目评选系统实践第五节项目评选实践的数据陈列展示，首先来了解一下页面之间的数据联通。
一、 页面之间的数据联通
本案例涉及宜搭表单页面、自定义页面，其中表单页面用来收集数据的页面，自定义负责将表单页面收集到的数据进行处理和展示。使用到的是远程数据源获取数据，并通过远程视频更新数据。
二、 相关的接口功能介绍
首先看一下获取数据的相关接口。获取的表单数据，所以使用的接口是根据条件搜索表单的实例详情去搜索表单的数据。它的用法是get的请求类型，自动加载选择开启，因为想要在一开始页面加载时就可以获取到数据，所以自动加载开启。
请求的地址是/dingtalk/web/应用，后面是应用的应用编码后面拼接的就是现在的这个接口的，请求参数，必填的参数有formUuid表单ID，如果想要搜索条件的话，可以传searchFeildJson去进行搜索，通过这个接口获取的数据想要实现循环渲染，那么对容器实现循环渲染来进行分析。
三、 容器实现循环渲染分析
循环渲染是能够自动的对表单中多条数据按照相同的布局和结构进行展示，无需重复设计步骤，提高了设计效率。
循环数据，循环数据要求数组的结构，字符串数组，数字数组或者对象数组都可以，也可以使用动态绑定远程数据源接口返回的循环变量，这样来进行循环数据的绑定
迭代变量名，默认可以通过this.item来获取循环里面的值
索引变量名，默认可以通过this.index获取循环下标。
四、实操演练
已经提前创建好了一个表单页面名称叫项目表单，并且已经录了四条数据。接下来要在自定义页面，也就是项目展示这个页面去获取表单的数据并处理绑定在页面当中去进行循环的展示。点击编辑，进入到自定义页面的设计器当中。
1、添加一个远程数据源
在远程数据源这里点击添加去新建一个远程数据源，可以去配置名称，描述，自动加载，加载方式请求地址，请求方法，请求参数还有数据处理等，
先给数据源去起一个名称，起名为get date。然后去更改请求地址，请求地址要去宜搭平台接口文档当中去进行获取。
打开宜搭平台接口文档。可以看到调用说明，还有示例代码。
需要将我们的实例代码复制过来，需要去更改的是应用编码，还有接口路径。将代码先复制到页面当中。复制到请求地址这里。然后去更改应用编码，应用编码使用的是浏览器可以在上方直接复制、粘贴。如果使用的不是浏览器的话，可以返回到应用管理后台页面当中找到应用设置。在这里找到、部署运维。
可以看到，应用编码在这里也可以去进行获取。完成之后，去更改接口路径。这里的接口路径，同样的要去宜搭平台接口文档当中去进行获取。需要去获取的数据是表单数据，所以找到3.6根据条件搜索表单实例详情列表。将接口复制过来。下方可以看到这里是有请求类型是get并且是受权限控制的，并且这里是有一个必填的参数，是formUuid，先将接口复制过来。然后请求方法get不需要去进行更改。
接下来去添加请求参数。formUuid可以通过两种方式进行添加一种是可以使用变量进行绑定formUuid，另一种方式是去点击添加一下，然后去书写formUuid，复制过来。
这里formUuid的参数值，同样的可以在应用设置当中部署运维当中找到页面编码，找到对应的一个页面编码，复制过来，粘贴在参数值里面。配置完成了
2、数据处理
如果想要去看一下当前的这个远程数据源，返回的这个数据可以通过这个控制台的network去进行查询，还可以通过数据处理去，在控制台当中看到这个数据，点击添加，然后添加一个请求完成的回调函数。在这里面，可以去书写断点。以断点的方式去查看返回的数据，保存。预览 右键点击检查。然后去刷新一下。因为数据源是自动加载就可以出发的，所以再次刷新的时候就会触发这个数据源里面书写的这个请求回调的函数.
将鼠标移动到content 当中这里有data,data里面有四条数据，复制、打印可以看到是一个数组包对象的格式，这是容器去进行循环所需要的数据格式，所以现在要去绑定容器把数据绑定上去
返回页面当中找到外层循环，在这里可以通过容器的高级去绑定上循环数据。绑定的循环数据，可以直接去变量绑定上数据源，数据源里面的data才是所需要的一个数据的一个格式，需要去绑定的时候，然后去通过space .getDatas,date的方式去获取到循环数据格式，除了这种方式还可以通过我们在这个数据源当中，在这里的return当中不return一个content。return一个content.date。循环数据当中就可以直接去绑定space .getDatas
先将数据源当中deougger去掉。接下来依次将图片、文本去绑定上循环数据里面具体的值
首先是图片。在图片这里可以看到，是有图片地址。这里图片地址的变量绑定是一个地址的一个格式，所以来看一下我们的这个页面当中，返回的数据格式。图片是在fromdate里面，并且一个数据格式，拿出来是一个字符串的一个格式。将字符串去掉，然后就可以看到是一个数组抱对象的一个格式，这样就可以拿到里面具体的这个图片地址所需要的地址。
所以需要在变量绑定这里去进行一个处理，这里通过JSON.parse将转换成JSON的格式。那在容器里面的图片是通过item.formDate.图片的唯一标识，直接将右键去复制路径也是可以的。来进行一个获取
现在通过JSON.parse，已经将获取的这个复杂的字符串转换成了一个JSON的一个数组的格式，那我们现在通过下标零，然后preview url的方式，也同样地复制过来。通过这种方式去获取到里面的图片地址。点击确定,保存,预览。可以看到数据已经循环成了四条数据就代表已经获取到容器里面的循环里面的图片并且展示在页面当中
为什么通过item的方式去获取到容器里面这些值呢？看一下外层的容器，这里面在高级当中，是有一个迭代变量名默认为item也就是说在容器里面的这些数据都可以通过item.的方式来获取到这里边的循环的数据，然后依次的去进行一个展示。
现在配置里面的文本。同样的是使用到变量绑定。然后通过item.的方式去获取到文本组件的唯一标识。formUuid下面，去复制路径.这就是项目的名称。
现在来配置项目描述信息。同样的通过这种方式去进行复制。下面是formInstId可以进行展示也可以不去进行一个书写，在这里先来进行一个展示。这里的formInstId是formdate是平级的，找到之后，将路径复制过来，点击确定，保存，预览看一下效果.
现在我图片、项目的名称、项目描述信息都已经展示在页面当中。现在来看一下的这个图片
接下来设置条件绑定，比如说绑定变量当中这里不仅可以去进行一个展示还可以去进行条件的判断。比如说来判断这个图片是否有这个图片，如果有的话，展示这个图片，如果没有的话，展示一个为空。就可以通过sum运算符的方式进行判断，首先来看一下当前是否有图片。如果有的话去展示，没有的话展示一个为空。点击确定。这就是条件展示，可以在变量绑定当中去进行一个条件的判断。
接下来事件绑定。点击访问，找到外层的容器在这里面去新建一个动作。可以去设置一个触发的条件，这里面可以去设置当点击时去进行触发。在右侧弹出的动作面板当中可以去书写逻辑，点击访问时可以跳转到项目详情页面，那就可以通过动作面板的配置去完成，可以去找到的宜搭开发中心这里还有一些API参考可以去进行使用
去进行一个页面的跳转，就可以在右侧找到这个路由。复制过来。这里面包括跳转的地址，携带的参数是否打开，新的页面是否为url，还有一个跳转方式。
先来看一下链接地址。这里的链接地址回到页面当中。找到项目表达详情数据，随意打开一个这里可以看到一个详情信息的地址，那
除了后面的formInstId是唯一的以外，前面的都是同样的，所以将前面的这个路径复制过来
去配置携带参数，刚才在项目详情中可以了解到表单想起的url地址当中，唯一不同的是formInstId。
所以可以复制过来。这里面它的formInstId，可以在上方去进行一个定义。定一个同样的名称formInstId，然后通过this.item.formInstId这种方式去获取到这个容器里面也就是这个循环容器里面一个formInstId。可以确保当前点击的这个访问formInstId就是所需要的。
当配置完成之后是否新开页面和是否为url都选择ture.打开了一个类型，先去掉、保存、预览。新开一个页面。点击访问。刚才访问的是儿童快乐家园，现在就可以看到项目名称就是儿童快乐家园.
主要的一个知识点就是刚才书写的this.item.formInstId。这里面的item也就是刚才所说的容器、迭代变量名，在里面去绑定变量可以通过item.的方式在动作面板当中可以通过item.的方式去进行获取这个循环里面当前点击的这个具体的值。
