Search code examples
data-bindingsapui5

Difference between one-way and one-time binding in UI5


What is the difference between one-time and one-way binding in UI5?

Are there any user specific use-cases where I would use each of them? I could not get much info from the documentation.


Solution

  • Data binding modes in UI5

    One-way

    • What it does: unidirectional data flow. Changes in the model data (e.g. via setProperty) are steadily propagated to the interested elements in the UI.
    • Use-case: one prominent example is the device model (a one-way JSONModel). It shouldn't accept any user inputs that might update the device information accidentally.

      We have to set the binding mode to OneWay as the device model is read-only and we want to avoid changing the model accidentally when we bind properties of a control to it. By default, models in OpenUI5 are bidirectional (TwoWay). When the property changes, the bound model value is updated as well.

    One-time

    • What it does: one-time data flow. When the binding object is evaluated, its corresponding model data are read and written to the element properties once, and never again.
    • Why it exists: it all comes down to the number of change listeners. Fewer listeners means less memory allocation and less stuff to maintain during the runtime. The binding mode OneTime has thus the potential, compared to other binding modes, to optimize performance and memory consumption.
    • When to use: for static, non-mutating data.
      Note: for property bindings, oBindingInfo.value (since 1.61) can be also defined for static values instead of relying on a model in property binding.
    • Use-case: the prominent example here is the ODataMetaModel. From its API reference:

      This model is read-only and thus only supports OneTime binding mode. No events are fired!

    For more information, see the documentation topic "Data Binding".


    Assigning binding modes in UI5

    You can assign one of the binding mode enum values 'Default', 'OneTime', 'OneWay', or 'TwoWay' in the following way:

    • To a specific binding only:

      <Text text="{ path: '...', mode: 'OneTime' }"/>
    • To all bindings managed by the model:

      myModel.setDefaultBindingMode("OneWay");
      

      Or in the app descriptor in case of a v2.ODataModel:

      {
        "sap.ui5": {
          "models": {
            "myODataV2Model": {
              "dataSource": "...",
              "settings": {
                "defaultBindingMode": "TwoWay"
              },
              "preload": true
            }
          }
        }
      }
    • In Expression Binding with the following syntax:

      • myProperty="{:= ...}"OneTime
      • myProperty="{= ...}"OneWay
    • Custom formatter in property bindings (e.g. value="{..., formatter: '.createText' }") as well as composition with string-literals (e.g. value="My Name is {/name}") forces the binding mode to become OneWay. Use type in order to keep the property binding TwoWay.