如何在sapUI XML-View中使用if/else条件?

Ben*_*rth 8 javascript xml sapui5

如何在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);
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

和一个视图:

<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>
Run Code Online (Sandbox Code Playgroud)

编辑:

有没有更好的方法来实现它,而不是实现一个矫枉过正的XML预处理器?

Mar*_*arc 9

OpenUI5支持预处理指令表达式绑定

使用预处理指令,您可以执行此类操作

<template:if test="{marketed}">
    <template:then>
        <Label text="product is marketed" />
    </template:then>
    <template:else>
        <Image src="path.jpg" />
    </template:else>
</template:if>
Run Code Online (Sandbox Code Playgroud)

我不确定test第一行是否测试null/not nulltrue/false.

这是表达式绑定可能很方便的地方:它允许在大括号内使用复杂的表达式

<template:if test="{= ${marketed} === true}">
Run Code Online (Sandbox Code Playgroud)

编辑

以下解决方案可能更简单,但似乎有点hacky.

将这两个元素嵌入XML视图中,但使用复杂的表达式绑定切换可见性.

<Label text="product is marketed" visible="{= ${marketed} === true}"/>
<Image src="path.jpg" visible="{= ${marketed} === false}"/>
Run Code Online (Sandbox Code Playgroud)

  • 好的,感谢您的意见。XML 预处理器似乎是一个可能的解决方案,但对于像 if/else 这样的“小”东西来说感觉有点矫枉过正。也许有更好的方法吗? (2认同)
  • 我不敢相信 UI5 模板没有提供像 if/else 结构这样简单的东西。我在预处理器上看到了页面,如果这只是开箱即用就可以了。但是我没能启动并运行这个预处理器。这些示例根本没有帮助。难怪这个库没有得到 SAP 社区之外的任何喜爱。 (2认同)

use*_*624 5

我不确定我是否满足您的要求,但看起来只需将可见属性绑定到市场标志就可以了。

如果您需要以否定方式绑定,您可以使用表达式绑定,如

 visible="{= !${/marketed}}"
Run Code Online (Sandbox Code Playgroud)