# 条件执行
为了更好的利用表达式带来的灵活性，我们提供了基于引用端上实时数据计算执行表达式判断结果的条件执行，让端上的模板渲染可以基于实时数据驱动，指令的执行与否也可以基于当前的实时数据状态值来决定。
# demo
# dShow
组件使用，实时展现条件判断，与 dWhen 的区别是， dShow 为 false 在页面渲染时也会渲染，在初次的时候渲染状态会稍慢一些，但状态的切换不会导致组件重新被渲染，从而对性能也有优势，考虑到性能，通常更推荐使用 dShow 在一些状态需要被频繁改变或切换的组件上，优化后续交互中的渲染与展示速度。(表达式的内容可以作为常量或者与 dataSource 引用数据源的组合使用)
// dataSource 示例
{
"videoMode": "control",
"barrageStatus": true,
"barrageOnIcon": "https://duerstatic.cdn.bcebos.com/swan/components/video/barrage_on.png@f_webp,q_90",
"barrageOffIcon": "https://duerstatic.cdn.bcebos.com/swan/components/video/barrage_off.png@f_webp,q_90"
}
// 组件使用示例
{
"type": "Image",
"componentId": "barrage_image",
"dShow": "<%= videoMode === 'control' %>",
"styles": {
"position": "absolute",
"top": "60dp",
"right": "60dp",
"width": "60dp",
"height": "60dp"
},
"props": {
"src":"<%= barrageStatus ? barrageOnIcon : barrageOffIcon%>"
},
"events": {
"onClick": [
{
"type": "UpdateDataSource",
"data": {
// 将 dataSource 中的 barrageStatus 属性进行布尔值取反
"barrageStatus": "<%= !barrageStatus %>"
}
}
]
}
},
...
# dWhen
实时渲染（组件）/执行（指令）条件判断
# dWhen 在组件中的应用
作为组件判断条件使用时，基于属性值：true | false，决定该组件是否被渲染，与 dShow 的区别是， dWhen 为 false 在页面渲染时不会被渲染，在初次的时候渲染状态会稍快一些，但状态的切换可能导致组件重新被渲染，并触发组件的 onLoaded 事件，通常更推荐使用 dWhen 在一些状态不需要被频繁改变或切换的组件上，可提升首次页面模板中的渲染与展示速度。(表达式的内容可以作为常量或者与 dataSource 引用数据源的组合使用)
// dataSource 示例
{
"showCondition": false,
"executeCondition": true
}
// 组件使用示例
{
"type": "Container",
// 如果 showCondition 为 true 则渲染该组件
"dWhen": "<%= showCondition === true %>",
"styles": {
"height": "341dp",
"width": "859dp",
...
},
"events": {
"onLoaded": [
{...}
]
}
...
}
# dWhen 在指令中的应用
作为指令执行前的条件判断使用，基于表达式的计算结果：true | false，决定该指令能否被继续执行。
// dataSource 示例
{
"showCondition": false,
"executeCondition": true
}
// 组件使用示例
{
"type": "Image",
"events": {
"onClick": [
{
"type": "SendEvent",
// 如果 executeCondition 为 true 则执行该指令
"dWhen": "<%= executeCondition === true %>",
"componentId": "component_1"
}
]
},
...
}
# dFor
基于组件模板绑定的列表数据内容实时渲染组件，dFor 的对应属性值，应为一个列表数组数据，决定了该组件模板会基于列表数据拷贝出多少个同级组件，dFor 可应用到任意组件类型上；绑定列表数据的变动，会让组件展现同步更新；其中，定义了两个引用变量：$ITEM（数组数据中的对应项）、$INDEX（数组数据中对应项的下标值），用来作为组件模板的引用数据源。
注：dFor 目前不支持嵌套 目前不支持嵌套 目前不支持嵌套
// dataSource 示例
{
"dayCourseList": [
{
"day": "一",
"dayCourseStatus": "1",
"compId": "tab1",
"ballCompId": "ball1",
"index": "1"
},
{
"day": "二",
"dayCourseStatus": "1",
"compId": "tab2",
"ballCompId": "ball2",
"index": "2"
},
{
"day": "三",
"dayCourseStatus": "1",
"compId": "tab3",
"ballCompId": "ball3",
"index": "3"
},
{
"day": "四",
"dayCourseStatus": "1",
"compId": "tab4",
"ballCompId": "ball4",
"index": "4"
},
{
"day": "五",
"dayCourseStatus": "1",
"compId": "tab5",
"ballCompId": "ball5",
"index": "5"
},
{
"day": "六",
"dayCourseStatus": "1",
"compId": "tab6",
"ballCompId": "ball6",
"index": "6"
},
{
"day": "七",
"dayCourseStatus": "1",
"compId": "tab7",
"ballCompId": "ball7",
"index": "7"
}
]
}
// 组件使用示例
{
"type": "Container",
"dFor": "${payload.dayCourseList}",
"styles": {
"width": "50dp",
"height": "50dp",
// 若为列表第一个，则 margin-left 设置为 65dp，否则设置为 80dp
"margin-left": "<%= $ITEM.index == '1' ? '65dp':'80dp' %>",
"flex-direction": "column"
},
"events": {
"onClick": [
{
"type": "SetPage",
"componentId": "pagerCompId",
"position": "absolute",
"value": "<%= $ITEM.index - 1 %>"
},
{
"type": "UpdateDataSource",
"data": {
"currentDay": "<%= $ITEM.index %>"
}
}
]
},
"items": [
{
"type": "Container",
"styles": {
"flex-direction": "column",
"width": "45dp",
"height": "45dp",
"justify-content": "center",
"align-items": "center"
},
"items": [
{
"type": "Container",
"componentId": "<%= $ITEM.compId %>",
"styles": {
"position": "absolute",
"top": "0dp",
"left": "0dp",
"hey": "<%= currentDay %>"
},
"dShow": "<%= $ITEM.index == currentDay %>",
"items": [
{
"type": "Image",
"styles": {
"width": "45dp",
"height": "45dp",
"scale-type": "centerCrop"
},
"props": {
"src": "https://dbp-dict.cdn.bcebos.com/courselist/dateBall2x.png"
}
}
]
},
{
"type": "Text",
"styles": {
"font-size": "20dp",
"color": "#FFFFFF"
},
"props": {
"text": "<%= $ITEM.day %>"
}
}
]
}
]
}