How is data binding implemented in SAPUI5?

Question

In this awesome question: How to Implement DOM Data Binding in JavaScript Many data binding implementation details is well explained.

There are also many exploring blogs about dirty checking in Angular, Object.defineProperty used in Vue.js and virtual DOM and so on...

But in UI5 docs, there is only how to use data binding. No details about how data binding is implemented.

I've read docs about sap.ui.base.ManagedObject and source code of it .In the constructor of sap.ui.base.ManagedObject, it says these objects are related to data binding, but I don't know how. Sometimes I will log them out to debug my data binding, but still got no big picture:

        // data binding
        this.oModels = {};
        this.aPropagationListeners = [];
        this.oBindingContexts = {};
        this.mElementBindingContexts = {};
        this.mBindingInfos = {};
        this.mObjectBindingInfos = {};

And also lost in ManagedObject.prototype.bindObject.

I really hope to learn how Dom updated when data model changes and vice versa.

Answer 1

Some comments said UI5 use Handlebars for data binding, and after search, Handlebars only support for one-time data binding. What I am more curious is how two-way data binding implemented in UI5(Sorry for not making this clear in the first place).

In Handlebars，once you compiled your template, the view/DOM has nothing to do with the data model.

But two-way data binding connects data to a property or attribute of an element in its local DOM. Which means:

When properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model. https://stackoverflow.com/a/13504965/5238583

In the question of How to Implement DOM Data Binding in JavaScript , many techniques are mentioned. UI5 uses these two(what I've found so far): add change event listener and mutators(setter)

I used this official sample for example: Data Binding - Step 13 - Element Binding

data binding changes when oProductDetailPanel.bindElement({ path: sPath, model: "products" }); is called.

Set break points in oBinding.setContext() in ManagedObject.prototype.updateBindingContext and ManagedObject.prototype.updateProperty. And you can see it in call stack.

TL;DR: Core steps are 3, 6, 8

The main steps are:

1. Element.prototype.bindElement equals to ManagedObject.prototype.bindObject

2. oBinding.initialize() which means ClientContextBinding.prototype.initialize is called in ManagedObject.prototype._bindObject

3. Binding.prototype._fireChange is called in the createBindingContext callback. Which fire change event: this.fireEvent("change", mArguments);

4. And! The change event handler is defined in ManagedObject.prototype._bindObject :

   var fChangeHandler = function(oEvent) {
        that.setElementBindingContext(oBinding.getBoundContext(), sModelName);
   };
   oBinding.attachChange(fChangeHandler);
   oBindingInfo.modelChangeHandler = fChangeHandler;
   

5. setElementBindingContext() calls ManagedObject.prototype.updateBindingContext eventually

6. In updateBindingContext, the call stack is oBinding.setContext(oContext) -> JSONPropertyBinding.prototype.checkUpdate(because the sample use JSON Model here) -> this._fireChange({reason: ChangeReason.Change})

7. For the second change event, the handler is in ManagedObject.prototype._bindProperty (There are many fModelChangeHandler in bind functions of ManagedObject, For our bindElement sample, we only need this one)

8. In the fModelChangeHandler, ManagedObject.prototype.updateProperty is called. That where our setter(mutator) is used:

whenever a property binding is changed.This method gets the external format from the property binding and applies it to the setter.

this[oPropertyInfo._sMutator](oValue);. For our sample oPropertyInfo._sMutator is setValue. execute this, the value in Input <Input value="{products>ProductID}"/> will be changed.

Original record here: https://github.com/TinaC/Blog/blob/master/SAPUI5/Data_Binding.md