Question

我已经定义了图标标签。我必须根据条件在其中一个标签的字段中显示数据。对于Eg：

对于以下列，我必须根据条件显示数据。

if text.type ===1, 
     display text.field1 
else if text.type ===2,
     .... text.field2
else
     .... text.field3
endif.

代码段：

<ColumnListItem type="Active">
<cells>
<Text text="{= ${/TxtModel/AssignType} === '1' ?  }" width="auto" maxLines="2" wrapping="false" textAlign="Center" textDirection="Inherit"/>

</ColumnListItem>

Answer 1

利用preprocessing instructions

我使用的是基于AssignType员工为1或5或8的4个用例。这里我们正在使用if/then/else指令。

  <template:if test="{= {${aufnrTxtModel>/Ltxt/AssignType} === 1}">
      <template:then>
         <Text text="{aufnrTxtModel>/Ltxt/Pernr}" width="auto" maxLines="2" wrapping="false" textAlign="Center" textDirection="Inherit"/>
      </template:then>
      <template:elseif test="{= {${aufnrTxtModel>/Ltxt/AssignType} === 5}">
        <Text text="{aufnrTxtModel>/Ltxt/Ingpr}" width="auto" maxLines="2" wrapping="false" textAlign="Center" textDirection="Inherit"/>
      </template:elseif>
    <template:elseif test="{= {${aufnrTxtModel>/Ltxt/AssignType} === 8}">
        <Text text="{aufnrTxtModel>/WCPL}" width="auto" maxLines="2" wrapping="false" textAlign="Center" textDirection="Inherit"/>
      </template:elseif>
      <template:else>
        <Text text="" width="auto" maxLines="2" wrapping="false" textAlign="Center" textDirection="Inherit"/>
      </template:else>
    </template:if>

您还可以使用custom formatter，您可以在路径中传递AssignType，Pernr，Ingpr，WCPL，并且可以在您的formatter函数，您可以在其中编写比这个复杂的xml更容易更改的所有逻辑。

Answer 2

您可以使用嵌套的绑定表达式：

<Input id='inputStatus3' enabled='false' value='{= ${/AssignType} === "1" ? "field1" : ${/AssignType} === "2" ? "field2" : ${/AssignType} === "3" ? "field3" : "field4" }' />

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Bernard LeTourneur - UI5 Single Page</title>
        <script
        	src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
            id='sap-ui-bootstrap'
            data-sap-ui-theme='sap_belize'
            data-sap-ui-libs='sap.m'
            data-sap-ui-bindingSyntax='complex'
            data-sap-ui-compatVersion='edge'
            data-sap-ui-preload='async'>    
        </script>
        <script id='myXmlView' type='ui5/xmlview'>
            <mvc:View
                controllerName='MyController'
                xmlns='sap.m'
                xmlns:core='sap.ui.core'
                xmlns:mvc='sap.ui.core.mvc'>
                <Input id='inputAssignType' valueLiveUpdate='true' enabled='true' value='{/AssignType}' />                
                <Input id='inputOutcome' enabled='false' value='{= ${/AssignType} === "1" ? "field1" : ${/AssignType} === "2" ? "field2" : ${/AssignType} === "3" ? "field3" : "default" }' />
            </mvc:View>
        </script>
        <script>
            sap.ui.getCore().attachInit(function () {
                'use strict';

                sap.ui.define([
                    'sap/ui/core/mvc/Controller',
                    "sap/ui/model/json/JSONModel"
                ], function (Controller, JSONModel) {
                    'use strict';

                    return Controller.extend('MyController', {
                        onInit : function () {                     
                            this.getView().setModel(new JSONModel({AssignType: '3'}));
                        },
                    });
                });
                sap.ui.xmlview({
                    viewContent : jQuery('#myXmlView').html()
                }).placeAt('content');
            });
        </script>
    </head>
    <body class='sapUiBody'>
        <div id='content'></div>
    </body>
</html>

Answer 3

表达式绑定contains several syntax errors。因为它变得太长而且难以辨认，所以最好使用UI5推荐的格式化程序：

我们建议使用格式化函数而不是非常复杂且难以阅读的表达式。^[src]

在你的情况下：

<Text text="{
  path: 'aufnrTxtModel>/Ltxt/AssignType',
  formatter: '.getMyText'
}" />

然后，在控制器中：

getMyText: function(assignType) {
  const myModel = this.getView().getModel("aufnrTxtModel");
  switch (assignType) {
    case "1":
      return myModel.getProperty("/Ltxt/Pernr");
    case "5":
      return myModel.getProperty("/Ltxt/Ingpr");
    case "8":
      return myModel.getProperty("/WCPL");
    default:
      return assignType;
  }
},

根据XML视图中的条件绑定数据。 SAPUI5

3 个答案: