Question

在这个很棒的问题中：How to Implement DOM Data Binding in JavaScript 许多数据绑定实现细节都得到了很好的解释。

还有许多关于Angular中的脏检查的博客，在Vue.js和虚拟DOM中使用的Object.defineProperty等等......

但在UI5 docs中，只有如何使用数据绑定。没有关于如何实现数据绑定的细节。

我已阅读有关sap.ui.base.ManagedObject和source code of it的文档在constructor of sap.ui.base.ManagedObject中，它说这些对象与数据绑定有关，但我不知道如何。有时我会将它们记录下来调试我的数据绑定，但仍然没有大图：

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

并且在ManagedObject.prototype.bindObject中丢失了。

我真的希望了解当数据模型发生变化时Dom的更新方式，反之亦然。

Answer 1

有些评论称UI5使用Handlebars进行数据绑定，搜索后，Handlebars仅支持one-time data binding。我更感兴趣的是如何在UI5中实现双向数据绑定（很抱歉没有首先明确这一点）。

在Handlebars中，一旦编译了模板，view / DOM就与数据模型无关。

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

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

在How to Implement DOM Data Binding in JavaScript 的问题中，提到了许多技术。 UI5使用这两个（我到目前为止发现的）：add change event listener和mutators(setter)

我使用了这个官方示例：Data Binding - Step 13 - Element Binding

数据绑定何时更改 oProductDetailPanel.bindElement({ path: sPath, model: "products" });被称为。{/ p>

在oBinding.setContext() in ManagedObject.prototype.updateBindingContext和ManagedObject.prototype.updateProperty中设置断点。你可以在调用堆栈中看到它。

TL; DR：核心步骤为3,6,8

主要步骤是：

Element.prototype.bindElement等于ManagedObject.prototype.bindObject
oBinding.initialize()表示在ManagedObject.prototype._bindObject

ClientContextBinding.prototype.initialize

createBindingContext

Binding.prototype._fireChange。哪个火灾change事件：this.fireEvent("change", mArguments);

和！更改事件处理程序在ManagedObject.prototype._bindObject：

中定义

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

setElementBindingContext()最终致电ManagedObject.prototype.updateBindingContext
在updateBindingContext中，调用堆栈为oBinding.setContext(oContext) - ＆gt; JSONPropertyBinding.prototype.checkUpdate（因为此处的示例使用JSON模型） - ＆gt; this._fireChange({reason: ChangeReason.Change})
对于第二个更改事件，处理程序位于ManagedObject.prototype._bindProperty（ManagedObject的绑定函数中有许多fModelChangeHandler，对于我们的bindElement示例，我们只需要这个）
在fModelChangeHandler中，ManagedObject.prototype.updateProperty被调用。使用我们的setter（mutator）的地方：

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

this[oPropertyInfo._sMutator](oValue);。我们的示例oPropertyInfo._sMutator是setValue。执行此操作，输入<Input value="{products>ProductID}"/>中的值将被更改。

原始记录：https://github.com/TinaC/Blog/blob/master/SAPUI5/Data_Binding.md

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

1 个答案: