如何在SapUI5中的
XML-View中实现if / else条件,该条件使用来自
JSONModel的标志(条件)?
到目前为止我有一个控制器:
sap.ui.define([
"sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel"
],function (Controller,JSONModel) {
"use strict";
return Controller.extend("sap.ui.demo.myApp.myController",{
onInit: function () {
//// set data model on view
var oData = {
title: "A cool title",values: [{name: "Text 1",marketed: true},{name: "Text 2",marketed: false},{name: "Text 3",marketed: true}]
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
}
});
});
和一个视图:
<mvc:View
controllerName="sap.ui.demo.myApp.myController"
xmlns="sap.m"
>
<!-- using aggregation binding -->
<Panel expandable="true" expanded="true" headerText="{/title}" width="100%" content="{/values}">
<content>
<Label text="{name}"/>
<!-- if {marketed}
<Label text="product is marketed"/>
else
add nothing
-->
</content>
</Panel>
</mvc:View>
编辑:
有没有更好的方法来实现它,而不是实现一个矫枉过正的XML预处理器?
解决方法
OpenUI5支持
Preprocessing Instructions和
Expression Binding
使用预处理指令,您可以执行此类操作
<template:if test="{marketed}">
<template:then>
<Label text="product is marketed" />
</template:then>
<template:else>
<Image src="path.jpg" />
</template:else>
</template:if>
我不确定第一行中的测试是否测试null / not null或true / false.
这是表达式绑定可能很方便的地方:它允许在大括号内使用复杂的表达式
<template:if test="{= ${marketed} === true}">
编辑
以下解决方案可能更简单,但似乎有点hacky.
将这两个元素嵌入XML视图中,但使用复杂的表达式绑定切换可见性.
<Label text="product is marketed" visible="{= ${marketed} === true}"/>
<Image src="path.jpg" visible="{= ${marketed} === false}"/>