Как использовать условие if/else в XML-представлении sapUI?

Как я могу реализовать условие if/else в XML-представлении в SapUI5, которое использует флаг (условие) из 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-препроцессора overkill-feeling?

6
javascript sapui5 xml

3 ответов

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}"/>
7

Я не уверен, что получил ваше требование, но похоже, что просто привязка видимого атрибута к рыночному флагу будет делать.

Если вам нужно связать отрицательным образом, вы можете использовать привязку выражения, например 

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

если я правильно понял ваш вопрос, вы можете использовать функцию форматирования.

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

.formatter.marketed в этом примере ссылается на функцию в отдельном форматере.файл js:

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

см. UI5 SDK для hpow, чтобы правильно настроить функцию форматирования:

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

в вашем примере, поскольку это всего лишь метка, мы возвращаем пустой строка, поэтому она будет пустой. Метка по-прежнему будет отображаться, но это пустая строка, поэтому показывать нечего, поэтому пользователь никогда не узнает, что она есть. Я не совсем уверен, но если ты вернешься ... --3--> вместо пустой строки метка может вообще не отображаться.

3