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

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

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

并且有代码为证：

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

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

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

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”:

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:

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.

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.

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.

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

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

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

Before line 5624 is executed:

After executed:

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:

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

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

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:

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

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

为SAP UI5正名 - 它也支持双向绑定相关推荐

SAP UI5 数据类型(data type) 学习笔记
SAPUI5 中的数据类型用作验证用户输入的机制(例如,"hello"不是订单数量的可接受值),并确保数据在 UI 上被正确格式化和显示(例如将 1234567 显示为 1,234 ...
SAP UI5 的前世今生
Jerry 在加入 SAP 电商云 Spartacus 开发团队从零开始学习 Angular 时,对这款出身名门的前端开发框架的来龙去脉,做了一些简单的了解. 本公众号一万多粉丝里,有不少朋友都在日常 ...
SAP UI5 应用开发教程之四十六 - 使用 Message Manager 实现开箱即用的验证(Validation)信息抛出
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
微信小程序和vue双向绑定哪里不一样_个人理解Vue和React区别
本文转载自掘金,作者:binbinsilk, 监听数据变化的实现原理不同 Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 Reac ...
JeecgBoot的前端Form升级为FormModel用法(支持 v-model 绑定)
FormModel 表单 (支持 v-model 绑定)(Ant Design of Vue 版本:1.5.0+) 新版form特性 1.支持双向绑定 2.无需v-decorator这个反人类属性设置 ...
SAP UI5 初学者教程之八 - 多语言的支持试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 应用开发教程之八 - 多语言的支持
从本步骤开始,我们将 SAP UI5 控件的文本,通过单独的资源文件(Resources files)维护,以达到对多语言的支持(internationalization,简称 i18n). 先看本文 ...
关于 SAP UI5 对服务器端渲染 Server Sider Render 的支持问题
之前 Jerry 的公众号文章介绍过 SAP 产品的渲染模式: SAP UI渲染模式:客户端渲染 VS 服务器端渲染关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine ...
SAP UI5 标准应用的多语言支持 - SAP UI5 运行时语言判定机制
SAP UI5 对多语言的支持特性如下: The language codes according to the de facto standard BCP-47, which are used by ...

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

为SAP UI5正名 - 它也支持双向绑定相关推荐

最新文章

热门文章