Question

在我的UI5-app中，我有一个表，其中每行包含一个sap.m.Switch，该表通过formatter绑定到模型，因为数据以{{1}的形式来自数据库。 } / 1，而不是0 / true，这很可能破坏了默认的two-way data binding。

要根据此开关的编辑值更新数据模型，我实现了以下change事件：

false

它可以工作，但是我不确定这是否是实现这种逻辑的正确方法。
更改onChangeSwitch: function onChangeSwitch(oEvent) { let context = oEvent.oSource.getBindingContext(); let itemIndex = context.sPath.substr(1); let oModel = this.getView().byId("idTablePersons").getModel(); oModel.oData[itemIndex].isPersonActive = (oEvent.mParameters.state) ? 1 : 0; oModel.refresh(); }值后，是否有标准的方法来更新模型？

Answer 1

我认为您正在错误地解决这个问题。 sap.m.Switch已经具有一个属性，用于指示您可以直接绑定到模型的状态。

<Switch state="{IsPersonActive}" />

假设您将表中的项目绑定到一个未命名的模型，则将根据开关的状态将绑定行上的IsPersonActive标志设置为true或false 。

这也意味着，如果您的实体集中某些IsPersonActive标志已经设置为true或false，它将以正确的状态显示开关。

（…）数据以1 / 0的形式从数据库而不是true / false（…）（…）发出。
更改sap.m.Switch值后，是否有标准的方法来更新模型？

来自https://embed.plnkr.co/wwQXf8bTuiTP4RlP的双向数据绑定修复程序：

NumericBoolean.js （在 model / type 文件夹中）：

sap.ui.define(['sap/ui/model/SimpleType'], function(SimpleType) {
    'use strict';

    return SimpleType.extend('demo.model.type.NumericBoolean', {

        constructor: function() {
            SimpleType.apply(this, arguments);
        },

        formatValue: function(iValue) {
            return !!iValue;
        },

        parseValue: function(bValue) {
            return bValue ? 1 : 0;
        },

        validateValue: function() {
            // this method must be declared, even without implementation
        },
    });
});

重要提示：
即使未提供实现，也必须保留validateValue声明，否则sap.m.Switch将无法正常工作。

index.html （在根文件夹中）：

<!DOCTYPE HTML>
<html style="height: 100%;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Demo</title>

    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_fiori_3"
        data-sap-ui-libs="sap.ui.core, sap.m"
        data-sap-ui-async="true"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-resourceroots='{"demo": "./"}'
        data-sap-ui-xx-waitForTheme="true">
    </script>

    <script>
        sap.ui.getCore().attachInit(() => sap.ui.require([
            "sap/ui/core/mvc/XMLView",
            "sap/ui/model/json/JSONModel",
            "demo/model/type/NumericBoolean", // define and export it globally
        ], (XMLView, JSONModel) => XMLView.create({

            definition:
                `<mvc:View xmlns:mvc="sap.ui.core.mvc">
                    <VBox xmlns="sap.m" renderType="Bare" class="sapUiTinyMargin">
                        <ObjectStatus title="Model data" text="{/1or0}" />
                        <Switch state="{
                            path: '/1or0',
                            type: 'demo.model.type.NumericBoolean'
                        }"
                        type="AcceptReject" />
                    </VBox>
                </mvc:View>`,

            models: new JSONModel({ "1or0": 1 }),

        }).then(view => view.placeAt("content"))));
    </script>
</head>

<body id="content" class="sapUiBody" style="height: 100%"></body>

</html>

Answer 2

请尽可能使用表达式绑定，而不是格式化程序，例如，将开关属性“ state”映射到0/1到true / false。 https://sapui5.hana.ondemand.com/1.34.9/docs/guide/daf6852a04b44d118963968a1239d2c0.html

但是总的来说，我建议使用自定义类型（请参见上文），因为双向绑定解决方案也是如此，而无需实现更改事件。

在UI5中更新模型，使用格式化程序时，双向数据绑定变为单向

2 个答案: