数据组件

什么是数据组件

数据组件可以根据指定的数据来动态渲染页面,是我们实现动态展示和业务功能的核心组件,是众触成为应用平台而不是建站系统的灵魂所在。

HTML元素

可以指定用某个HTML元素来渲染数据组件这个容器,甚至可以选择空白来表示不渲染这个容器壳子。

数据源

通常我们会用表达式指定动态数据源,每次重渲染时都从此路径拿到的最新数据来渲染页面。也可以使用静态数据,但优先级低于动态数据。
三种数据源:

1. 数组数据源

需要指定子组件来循环渲染此数组的每项数据,默认是下标为0的儿子组件,其它子组件不受数据组件的影响,即数据源仅作用于指定循环子组件。循环子组件可以直接引用作用在它上面的对应数据项的数据,用$x来表示此数据项,用$index来表示其下标,用$array来表示原来的数组。

2. 树数据源

此数据源是个树形结构的对象,其关键是有个key为zchildren的数组子元素来存放孩子节点。类似于数组数据源,它会根据zchildren的每项数据来循环渲染指定子组件,并用有序列表(ol + li)包装。
除了$x$index外,数组$indexes表示当前数据项在zchildren的下标路径,数组长度表明它在树中位置的深度;开关函数$toggle用来触发数据项的展开或收起,布尔变量$isExpanded表示当前数据项是否展开(渲染)。

3. 对象数据源

如果数据源不是数组也不是树就被看作是对象数据源,包括数据源被解析成空时或未设置数据源时,所以尽管DB数据源是数组但数据未从DB返回前即为空,此时可以把数据源添加一个默认空数组,比如x.arr || []
对象数据源对所有子组件都起作用,所有子组件都可以直接引用此对象里的数据。

特别地,如果根节点选择了数据源,那么整个页面都可使用动态数据了。平台会自动在onRequest的时候准备好数据,即从数据源指定的表中取得_id为$id的数据。此时可以动态渲染页面标题/关键字/描述,这非常有利于SEO。特别地,me的$id就是当前登录用户;product数据源可以是它的唯一名;当数据源是xdb但$id并不是_id格式时,平台会把$id作为type并把$id的下一层路径作为key来获取数据。

渲染动态数据

数据源作用范围内的组件(对象类型数据源下的所有数据数据的后代节点;数组类型数据源下的指定循环子组件及其后代节点)才可以动态渲染。我们用小括号来表示要动态渲染的数据,括弧必须是放在最外层,即它前后不可以有其它任何字符。

不在作用范围内的小括号或前后有其它字符的小括号将被当作普通字符显示,不做动态解析。

渲染条件

可以使用渲染条件表达式来动态决定是否渲染此组件(及其后代)。条件为假时此组件在页面中不会有对应的元素节点,可加快渲染速度。而display: none样式虽然可使元素看不见,但它依旧被渲染出来了。

上下文数据 $ctx

数据源作用到该组件的数据称为上下文数据,可以使用log($ctx)准确地把真实执行环境中可以使用的数据打印出来。属性面板的展示的“上下文数据”是可用于事件表达式的上下文数据的一个静态侧影,用于形象地快速理解可能存在的数据,而非完全真实的运行时$ctx,比如组件数据源将用每个数据项依次循环作用于指定子组件,属性面板无法动态展示作用在它上面的每个数据项,只能展示叠加后的侧影,即后面数据项依次合并并覆盖前面数据项得到的结果,所以在展示中前面的数据会被后面的数据遮挡。

特别地,当数据组件外面还套有数据组件时,用$parent表示父数据组件(即外层数据组件)作用到当前数据组件的数据。同理$parent.$parent表示外层的外层

动态样式

不同于普通样式,动态样式是用JSON格式来编写的

  1. 英文单词之间不能用连字符-来连结,而应该使用驼峰写法,即大写第二个单词首字符。比如fontSize/backgroundColor

  2. 表达式作为属性值应该用"( )"包裹起来,比如"fontSize": "($v.small)"

重新挂载

挂载组件的重新挂载表达式

Make in ZC APP Platform