CompositeBinding with TwoWay Binding Mode

问题

I try to use the same SimpleForm for creating a new object and for editing. I try to make it this way:

<Input value="{= !${/isNew} ? ${som>Id} : ${newModel>Id}" />

But the bindings are not in mode TwoWay. Is there a possibility to make it to TwoWay Binding?

回答1:

In property binding, using ...

• Expression Binding
• Binding with string literals
• Multiple binding parts with a formatter

... turns the binding mode into OneWay (or even OneTime in case of {:= in Expression Binding). They all make use of the module CompositeBinding which can be observed with:

myInput.getBinding("value").getMetadata().getName() // "sap.ui.model.CompositeBinding"

Most of the property bindings with CompositeBinding are therefore OneWay.

Solution: When a type is assigned in addition to the parts, however, the property binding can become TwoWay. The appropriate type should be then a type derived from the abstract module CompositeType (e.g. Currency).

Demo

See: https://embed.plnkr.co/0MVvfZ/?show=view%2FHome.view.xml,preview

In our case, we could create a composite type which takes all three parts necessary for the ternary operation; one for the condition, one for the truthy case (a), and one for the falsy case (b):

<Input value="{
  parts: [
    '/condition',
    'a>/value',
    'b>/value'
  ],
  type: 'demo.model.type.Ternary'
}" />

The actual ternary operation happens in the type definition which could look something like this:

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

  return CompositeType.extend("demo.model.type.Ternary", {
    constructor: function() {
      CompositeType.apply(this, arguments);
      this.bParseWithValues = true; // make 'parts' available in parseValue
    },

    /**
    * Displaying data from the right model (model -> view)
    */
    formatValue: parts => parts[0] ? parts[1] : parts[2],

    /**
    * Assigning entered value to the right model (view -> model)
    */
    parseValue: (enteredValue, stuff, parts) => parts[0] ? [
      parts[0],
      enteredValue,
      parts[2],
    ] : [
      parts[0],
      parts[1],
      enteredValue,
    ],

    validateValue: () => true // Nothing to validate here
  });
});

---

Note

• Make sure that all binding parts have the mode TwoWay enabled:

  Note that a composite binding will be forced into mode OneWay when one of the binding parts is not in mode TwoWay.

• In order to enable CompositeBinding in the first place, compatVersion="edge" (or bindingSyntax="complex") has to be available in the bootstrap configuration.

回答2:

I am not quite sure, if using expression binding in values is the right way to do it, but should work with JSON models without additional coding (except for data-sap-ui-bindingsyntax="complex" in your ui5-bootstrap)

With a OData model you need to use oModel.setDefaultBindingMode("TwoWay") as described in Setting the Default Binding Mode since OData models use OneWay binding as default.

回答3:

There is another way you can go about this. Make use of any of the events(ex:submit) on the Input control.

View:

<Input value="{= !${/isNew} ? ${som>Id} : ${newModel>Id}" submit="onSubmitValue"/>

Controller:

onSubmitValue:function(oEvent){
      var value=oEvent.getSource().getValue();
  var sPath=oEvent.getSource().getBindingContext('YourModelName').getPath();
 this.getView().getModel('YourModelName').setProperty(sPath+'/PropertyName',value);
}

来源：https://stackoverflow.com/questions/49367613/compositebinding-with-twoway-binding-mode