sap.m.Button 文本格式化程序答案

【问题标题】：sap.m.Button text formattersap.m.Button 文本格式化程序
【发布时间】：2013-11-28 11:31:09
【问题描述】：

我正在关注 SAP UI 5 上的 this CRUD 示例，我正在尝试重现/了解 SAPUI5 的工作原理。

我正试图弄清楚这段代码是如何工作的：

this.createButton = new sap.m.Button({
    icon : "sap-icon://add",
    visible : {
        path : "local>/inEdit",
        formatter : function(inEdit) { return !inEdit; }
    },
    press : [ oCon.createButtonPress, oCon ]
});

createButton 在 Home.view.js 视图内创建，并从该模型对象中获取路径值，在 Home.controller.js 的 onInit 函数内实例化：

onInit : function(){
    var model = new sap.ui.model.json.JSONModel({
        mode : sap.m.ListMode.None,
        inEdit : false,
        inDelete : false,
        inBatch : false
    });
    this.getView().setModel(model, "local");
}

我不明白这段代码是如何工作的，同时创建createButton 按钮：

...
visible : {
    path : "local>/inEdit",
    formatter : function(inEdit) { return !inEdit; }
},
...

visible 接受一个布尔值作为值，它是从formatter 函数返回的，这没关系。我真正不明白的是如何，具有两个属性（path 和 formatter）的对象将自动“运行”formatter 的函数使用 path 的值作为它自己的 inputp 参数。我错过了什么吗？

我希望我已经足够清楚了，在此先感谢

【问题讨论】：

标签： javascript sapui5

【解决方案1】：

引导脚本元素上有一个属性 xx-bindingSyntax。例如：

<script id="sap-ui-bootstrap" type="text/javascript"
        src="lib/sapui5-1.16.3/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-libs="sap.ui.commons, sap.viz, sap.m">

在 sap-ui-core.js 中默认为“简单”。如果设置为“复杂”，如我的示例，UI5 构造函数将执行这行代码：

sap.ui.base.ManagedObject.bindingParser = sap.ui.base.BindingParser.complexParser;

使用该解析器，UI5 将寻找更复杂的属性定义，例如您的“可见”。要了解 complexParse 的工作原理，请打开 sap/ui/base/BindingParser.js。

这是对 UI5 的一个很好的补充，并且足够优雅，可以接受参数数组。但是，“格式化程序”这个名称有点用词不当。据推测，它最初是作为一种格式化功能，但对于诸如动态可见性之类的逻辑非常有用。

【讨论】：

【解决方案2】：

您必须区分直接设置属性和使用 SAPUI5 的数据绑定。

在您的示例中，完成了属性绑定 (https://sapui5.hana.ondemand.com/sdk/#docs/guide/BindingProperties.html) 使用了所谓的属性绑定扩展语法。该对象可以包含更多属性，其中包含有关绑定应如何表现的信息。您可以在文档中了解这一点。

如果您使用数据绑定，按钮的可见属性将绑定到控制器中定义的 JSONModel。每次更新模型时，按钮的 setVisble 方法都会自动触发，其值由数据绑定确定。

要详细了解 SAPUI5 中数据绑定的工作原理，您可以参考文档 (https://sapui5.hana.ondemand.com/sdk/#docs/guide/GettingStarted.html)

【讨论】：

我知道我正在使用数据绑定，我不明白的是格式化函数是如何自动运行的，它的参数是路径属性值..

【解决方案3】：

我可以解释我在此背后假设的原理，而无需对该主题有深入的框架知识。

每当您在控件属性和模型属性之间建立绑定时，都会发生以下情况：该控件将一个事件侦听器附加到模型，以侦听绑定路径下的更改，在您的情况下为/inEdit。每当该路径下的值发生更改时，事件就会触发控件侦听器执行并且它：

要么使用新值调用已注册的格式化程序，并将其返回值设置到控件属性中
或者 - 如果没有提供格式化程序/类型等 - 它直接将新值设置到控件属性上

在大多数情况下，属性更改会导致控件重新呈现，您将看到控件显示的新模型值。

如果有人知道，请纠正我。

【讨论】：