web-dev-qa-db-ja.com

SAPUI5 XML-Viewでif-else条件を使用する方法

JSONModelからのフラグ（条件）を使用するSAPUI5のXMLビューにif-else条件を実装するにはどうすればよいですか？

これまでのところController：

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プリプロセッサを実装するよりも良い方法はありますか？

javascriptxmlsapui5
9
Benvorth

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をテストしているかどうかはわかりません。これは、Expression Bindingが便利な場所です。中括弧内で複雑な式を使用できます。

<template:if test="{= ${marketed} === true}">

編集

次の解決策はもっとシンプルかもしれませんが、少しハックに思えます。

両方の要素をXMLビューに埋め込みますが、複雑な式バインディングで可視性を切り替えます。

<Label text="product is marketed" visible="{= ${marketed} === true}"/>
<Image src="path.jpg" visible="{= ${marketed} === false}"/>
9
Marc

要件を満たしているかどうかはわかりませんが、visible属性をMarketed-flagにバインドするだけのように見えます。

否定的な方法でバインドする必要がある場合は、次のような式バインディングを使用できます。

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

質問の性質を理解できたら、フォーマッター関数を使用できます。

<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を参照してください。

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

あなたの例では、これは単なるラベルなので、空の文字列を返すため、空白になります。ラベルは引き続きレンダリングされますが、それは空の文字列であるため、何も表示されないため、ユーザーはラベルがそこにあることを知ることはありません。完全にはわかりませんが、空の文字列ではなくundefinedを返すと、ラベルがまったくレンダリングされない可能性があります。

3
JamieC