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

Question

在我的 UI5 应用程序中，我有一个 table，其中每一行包含一个 sap.m.Switch, which is bound to the model via formatter, since the data is coming from the DB as 1/0, rather than true/false, and that, probably, breaks the default two-way data binding。

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

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();
}

它有效，但我不确定它是否是实现这种逻辑的正确方法。
更改 sap.m.Switch 值后是否有更新模型的标准方法？

Answer 1

我认为你的做法是错误的。 sap.m.Switch 已经有一个属性来指示您可以直接绑定到模型的状态。

<Switch state="{IsPersonActive}" />

假设您将 table 中的项目绑定到一个未命名的模型，这会将绑定行上的 IsPersonActive 标志设置为 true 或 false，具体取决于关于开关的状态。

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

(…) the data is coming from the DB as 1/0, rather than true/false (…).
Is there a standard way to update a model after changing sap.m.Switch value?

来自 https://embed.plnkr.co/wwQXf8bTuiTP4RlP 的 two-way 数据绑定修复：

NumericBoolean.js（最小示例）：

sap.ui.define([
  "sap/ui/model/SimpleType",
], Type => Type.extend('demo.model.type.NumericBoolean', {
  constructor: function() {
    Type.apply(this, arguments);
  },
  formatValue: iValue => !!+iValue,
  parseValue: bValue => bValue ? 1 : 0,
  validateValue: vValue => { /*validate...*/ },
}));

<Switch xmlns="sap.m" xmlns:core="sap.ui.core"
  core:require="{ NumericBoolean: 'demo/model/type/NumericBoolean' }"
  state="{
    path: '/1or0',
    type: 'NumericBoolean'
  }"
/>

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

Answer 2

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

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

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

Updating model in UI5, two-way data binding becomes one-way when using formatter

data-binding

sapui5