为SAP UI5正名 - 它也支持双向绑定

有的程序员和我讨论其现在的前端框架时,说Angular比UI5高级,因为前者支持双向绑定。


然而UI5也是支持双向绑定的,看下面这张图里Data Binding->Two way data binding一览,SAP UI5和Angular一样都是支持的哦:


为SAP UI5正名 - 它也支持双向绑定


并且有代码为证:


为SAP UI5正名 - 它也支持双向绑定

实际上,我专门在SAP社区上写过一篇文章,详细比较了Angular和UI5数据双向绑定的差异:


I first list a comparison from my point of view and will illustrate it in detail.

为SAP UI5正名 - 它也支持双向绑定


I use the following simple Angular application which only contains 11 lines to demonstrate the data binding implementation of Angular.


为SAP UI5正名 - 它也支持双向绑定

Here I have a input element marked with attribute ‘ng-model=”name”‘, which means I tell Angular that I have declared a data model with name “name”. Then for “Hello {{name}}”, it is actually a template and I tell Angular to render the page with static text “Hello” plus the actual content of input field.

You can test the application here. Every time you type something in the input field, the characters you have typed will be displayed after “Hello”:


为SAP UI5正名 - 它也支持双向绑定


In this blog, I will explain how these 11 lines of codes have implemented the data binding feature, with the help of Angular framework code.

When you launch the application for the first time, the application will look like below. Although you only saw blank field in input field and initial value after “Hello”, some logic has already been executed under the hood. I will first introduce how the initial value is rendered in html page.

How initial value is rendered in html page


Like UI5, Angular has also its bootstrap phase. During this phase, Angular will traverse the HTML DOM tree. Once it detects the input element marked with attribute “ng-model”, it will create a watch object for current scope:


为SAP UI5正名 - 它也支持双向绑定

The watcher object is just an object consisting of several functions. So far the last attribute points to a function, and the function get is used to extract value from data model.



为SAP UI5正名 - 它也支持双向绑定



And you have already noticed that although we do not explicitly specify event handler for input field, however it can still react to our input. Why? Angular framework has registered a listener on input event for us. We will go through the implementation of listener later. So now for the input element, we have one watcher and one listener.

为SAP UI5正名 - 它也支持双向绑定


Again a second watcher is created for text node, “Hello {{name}}”. So now we have two watchers created ans stored in watchers array of current scope object.


为SAP UI5正名 - 它也支持双向绑定

Still in bootstrap phase, the function $apply of scope is called.


为SAP UI5正名 - 它也支持双向绑定

Within this function, there is a DO loop to handle all watcher object of current scope one by one:


为SAP UI5正名 - 它也支持双向绑定


Since I haven’t typed anything in input field, I have only the static text “Hello” to be displayed:



为SAP UI5正名 - 它也支持双向绑定



Before line 5624 is executed:



为SAP UI5正名 - 它也支持双向绑定

After executed:


为SAP UI5正名 - 它也支持双向绑定


So far, the initial page display logic is introduced.

How the value from Input field can flow to Hello text field

Now I have typed “A” in input field:


为SAP UI5正名 - 它也支持双向绑定


Since I have explained previously that Angular has registered a listener for input field, so now it is called:


为SAP UI5正名 - 它也支持双向绑定


In this event handler, scope.$apply will be called.


为SAP UI5正名 - 它也支持双向绑定


You still remember the fact that all watchers will be handled within scope.$apply? This time, the input character “A” is extracted from input field as model:


为SAP UI5正名 - 它也支持双向绑定




Since now the template “Hello {{name}}” has already been filled with actual value, it is ready to render it:


为SAP UI5正名 - 它也支持双向绑定

After line 5624 is executed, you will see “Hello A” in UI:


为SAP UI5正名 - 它也支持双向绑定

上一篇:SAP CRM Fiori Simulation pipeline应用功能一览


下一篇:SAP UI5里xml fragment getContent方法的实现