sapui5 - attachChange callback not fired for getBinding("text") of sap.m.Button

Question

onInit(): function{
    this._oSelectedTrainingsModel = new sap.ui.model.json.JSONModel([]);
    this.getView().setModel(this._oSelectedTrainingsModel, "selectedTrainings");
},

onAfterRendering: function() {
    this.getView().byId("ViewSelectionButton").getBinding("text").attachChange(this._onTextUpdated, this);
},

In the XML view I have this binding:

<Button id="ViewSelectionButton"
    class="magnificationPrep"
    icon="sap-icon://cart-full"
    tooltip="Share"
    text="{i18n>viewTrainingsButton} ({= %{selectedTrainings>/}.length })"
    press="handlePressViewSelection"
/>

At some point in the controller, an object is added to the _oSelectedTrainingsModel:

this._oSelectedTrainingsModel.getProperty("/").push(oNewSelection);

At this point, the bound text property is changed and thus I'm expecting a call to the callback function _onTextUpdated.

The model is empty, this is probably part of the issue?

Answer 1

In order to update the UI via binding, you have to use setProperty with the same path used in the binding definition which triggers checkUpdate (<-- fires change event).

The problem was that you mutated the selectedTrainings-array manually via getProperty(...).push. This bypasses notifying UI5 about the changes since getProperty doesn't trigger checkUpdate. Therefore..:

Instead of

this._oSelectedTrainingsModel.getProperty("/").push(oNewSelection);
this._oSelectedTrainingsModel.refresh(true);

Do

const newArray = this._oSelectedTrainingsModel.getProperty("/").concat(oNewSelection);
this._oSelectedTrainingsModel.setProperty("/", newArray);

This alone is sufficient to update the UI thanks to the one-way data binding:

One-way binding means a binding from the model to the view; value changes in the model update all corresponding bindings and the view (and not the other way around).

There is no need to call refresh(true) which is an indication of anti-pattern. Here is a demo: stackoverflow.com/a/48226884

---

Btw: the module returned by getBinding("text") is CompositeBinding since there are more than one binding definitions involved. The CompositeBinding however does not offer attachChange for public use. So it shouldn't have been used anyway.