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

【问题标题】：Bind data based on condition in XML views. SAPUI5根据 XML 视图中的条件绑定数据。 SAPUI5
【发布时间】：2018-06-10 23:03:43
【问题描述】：

我已经定义了图标选项卡。我必须根据条件在选项卡的一个字段中显示数据。例如：

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

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

代码sn-p：

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

</ColumnListItem>

【问题讨论】：

这行得通吗？
很遗憾没有。我刚刚添加了我的answer below。这应该会有所帮助。

标签： javascript xml sapui5

【解决方案1】：

表达式绑定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;
  }
},

【讨论】：

【解决方案2】：

利用preprocessing instructions

我正在使用您有 4 个基于员工为 1 或 5 或 8 的 AssignType 的用例。这里我们正在使用 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更容易改变。

【讨论】：

【解决方案3】：

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

<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>

【讨论】：