如何在 SAPUI5 XML 视图中使用 if-else 条件？

Question

如何在使用来自 JSONModel 的标志（条件）的JSONModel中的 XML 视图中实现 if-else 条件？

到目前为止，我有一个控制器：

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 预处理器更好的方法呢？

Answer 1

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

使用预处理指令，您可以执行以下操作：

<template:if test="{marketed}">
    <template:then>
        <Label text="product is marketed" />
    </template:then>
    <template:else>
        <Image src="path.jpg" />
    </template:else>
</template:if>

我不知道，如果test在第一线测试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}"/>

Answer 2

我不确定我是否满足您的要求，但看起来只是简单地将visible属性绑定到marketke-flag就可以了。

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

 visible="{= !${/marketed}}"

Answer 3

如果我理解你的问题，你可以使用格式化函数。

<Label text="{
    path: 'marketed'
    formatter: '.formatter.marketed'
}"/>

此示例中的.formatter.marketed引用了一个单独的formatter.js文件中的函数：

marketed: function(marketed) {
    if(marketed) {
        return 'product is marketed';
    } else {
        return '';
    }
}

有关hpow的信息，请参阅ui5 SDK以正确设置formatter函数：

https://sapui5.hana.ondemand.com/sdk#docs/guide/0f8626ed7b7542ffaa44601828db20de.html

在你的例子中，因为这只是一个标签，我们返回一个空字符串，所以它只是空白。 Label仍然会被渲染，但它是一个空字符串，所以没有什么可以显示，所以用户永远不会知道它在那里。 我不完全确定，但如果你返回undefined而不是空字符串，标签可能根本不会被渲染。

Answer 4

在作为预处理指令之一的XML 模板的上下文中，另一种选择是将 Fragment 的fragmentName定义为表达式绑定，如下所示：

<core:Fragment fragmentName="{= ${path: 'facet>Target', formatter: 'sap.ui.model.odata.AnnotationHelper.isMultiple'} === 'true'
    ? 'sap.ui.core.sample.ViewTemplate.scenario.TableFacet'
    : 'sap.ui.core.sample.ViewTemplate.scenario.FormFacet' }" type="XML"/>

文档： https ://ui5.sap.com/#/topic/65da02badf704e03a4fd6bd4c5aba8f4