数据绑定是如何在SAPUI5中实现的？

Question

还有很多关于Angular中脏检查的探索博客，Vue.js和虚拟DOM中使用的Object.DefineProperty等等...

但在UI5文档中，只有如何使用数据绑定。没有关于如何实现数据绑定的详细信息。

我读过关于SAP.ui.base.ManagedObject的文档和它的源代码，在SAP.ui.base.ManagedObject的构造函数中，它说这些对象与数据绑定相关，但我不知道是如何绑定的。有时我会将它们注销以调试数据绑定,但仍然没有得到更好的结果：

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

我非常希望了解当数据模型发生变化时Dom是如何更新的，反之亦然。

Answer 1

有评论称UI5使用了handlebar进行数据绑定，而经过搜索，handlebar只支持一次性数据绑定。我更好奇的是双向数据绑定是如何在UI5中实现的（很抱歉在第一时间没有讲清楚这一点）。

在handlebars中，一旦您编译了模板，视图/DOM就与数据模型无关了。

但双向数据绑定将数据连接到元素在其本地DOM中的属性或属性。这意味着：

当模型中的属性更新时，UI也会更新。更新UI元素时，更改会传播回模型。https://stackoverflow.com/A/13504965/5238583

在如何在JavaScript中实现DOM数据绑定的问题中，提到了许多技术。UI5使用了这两个（到目前为止我已经发现了这两个）：添加变更事件监听器和mutators（setter）

我使用了这个官方示例作为例子：数据绑定-步骤13-元素绑定

调用OProductDetailPanel.BindElement（{path：sPath,model：“products”}）；时，数据绑定将发生更改。

在ManagedObject.Prototype.UpdateBindingContext和ManagedObject.Prototype.UpdateProperty中设置Obinding.SetContext（）中的断点。您可以在调用堆栈中看到它。

TL；DR：核心步骤为3、6、8

主要步骤有：

>

element.prototype.bindelement等于ManagedObject.prototype.bindObject

Obinding.Initialize()，这意味着在ManagedObject.Prototype._BindObject中调用ClientContextBinding.Prototype.Initialize

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

SetElementBindingContext()最终调用ManagedObject.Prototype.UpdateBindingContext

在UpdateBindingContext中，调用堆栈为OBinding.SetContext(oContext)->JSONPropertyBinding.Prototype.CheckUpdate（因为示例在此处使用了JSON模型）->This._FireChange（{reason：ChangereSon.Change}）

对于第二个变更事件，处理程序在ManagedObject.Prototype._BindProperty中（ManagedObject的绑定函数中有许多fModelChangeHandler，对于我们的BindElement示例，我们只需要这一个）

在FModelChangeHandler中，调用ManagedObject.Prototype.UpdateProperty。在使用我们的setter（mutator）的地方：

每当更改属性绑定时，此方法从属性绑定获取外部格式并将其应用于setter。

此[OPropertyInfo._Smutator](oValue)；。对于我们的示例OPropertyInfo._Smutator是setvalue。执行此操作，InputproductID}”/>中的值将被更改。