自定义 UI5 控件不更新绑定值 [英] Custom UI5 control does not update bound value

问题描述

如何将 OData 值传递给自定义 UI5 控件的属性?我试过了，但它不起作用.
如果我尝试将它传递给像 这样的普通控件，它工作很好.
如果我尝试传递一个静态值，它工作也很好:

<!--❌--><Text text="{Price}"/><!--✔️--><cc:CheckPrice valuePrice=1000"/><!--✔️-->

如何从远程 OData 服务传递值以在文本控件中显示它?

sap.ui.define([sap/ui/core/控制"，sap/m/标签"，sap/m/按钮"]、函数(控件、标签、按钮){严格使用"；返回 Control.extend(zgutfiory.zguttestfiorylr.controls.CheckPrice", {元数据:{特性: {价值价格":{类型:字符串"，可绑定:可绑定"}},聚合:{_标签":{类型:sap.m.Label"，多个:假，可见性:隐藏"},_按钮":{类型:sap.m.Button"，多个:假，可见性:隐藏"}},事件:{//...}},初始化:函数(){this.setAggregation("_label", new Label({文本:{i18n> controlCheckPrice}"}).addStyleClass("sapUiSmallMargin"));this.setAggregation(_button", new Button({文本:{i18n> controlCheckPrice}"，按:[this._onSubmit, this]}).addStyleClass("sapUiTinyMarginTopBottom"));},_onSubmit: 函数 (oEvent) {//...},渲染器:函数(oRm，oControl){oRm.write('
');oRm.write('<div class="zgutPriceWrap>>' + oControl.getValuePrice() + '</div>');oRm.renderControl(oControl.getAggregation(_label"));oRm.renderControl(oControl.getAggregation(_button"));oRm.write('</div>');}});});

UI5 版本:1.92

解决方案

您错过了在渲染函数中添加一些强制控制数据.当模型值发生变化时(例如ODataModel接收数据)，绑定属性的控件至少需要一个id来识别，这样控件才能更新.在您的情况下，id 未呈现.

要添加所需的控制数据，请使用:

• oRm.openStart("div", oCotrol) 在新的语义渲染(UI5 ≥ 1.67)的情况下.莉>
• oRm.writeControlData(oControl) 对于现在已弃用的基于字符串的渲染(UI5 ≤ 1.66).注意:请在此处使用 .writeEscaped for oControl.getValuePrice() 以避免 XSS.

此外，如果您覆盖了借用的方法(例如 init)，请确保调用超级函数.这对于生命周期钩子尤其重要.

示例:https://embed.plnkr.co/gnmPoh3KS7L3DDXZ?show=controls%2FCheckPrice.js,预览

---

请参阅API 参考:sap/ui/core/RenderManager 了解更多信息.

How can I pass OData value to property of a custom UI5 control? I tried this but it's not working.
If I try passing it to normal control like <Text>, it's working fine.
If I try passing a static value, it's working fine too:

<cc:CheckPrice valuePrice="{Price}"/> <!--❌-->
<Text text="{Price}"/> <!--✔️-->
<cc:CheckPrice valuePrice="1000"/> <!--✔️-->

How can I pass the value from a remote OData service to show it like in Text control?

sap.ui.define([
    "sap/ui/core/Control",
    "sap/m/Label",
    "sap/m/Button"
], function (Control, Label, Button) {
    "use strict";

    return Control.extend("zgutfiory.zguttestfiorylr.controls.CheckPrice", {
        metadata: {
            properties: {
                "valuePrice": {
                    type: "string",
                    bindable: "bindable"
                }
            },
            aggregations: {
                "_label": {
                    type: "sap.m.Label",
                    multiple: false,
                    visibility: "hidden"
                },
                "_button": {
                    type: "sap.m.Button",
                    multiple: false,
                    visibility: "hidden"
                }
            },
            events: {
                // ...
            }
        },

        init: function () {
            this.setAggregation("_label", new Label({
                text: "{i18n>controlCheckPrice}"
            }).addStyleClass("sapUiSmallMargin"));
            this.setAggregation("_button", new Button({
                text: "{i18n>controlCheckPrice}",
                press: [this._onSubmit, this]
            }).addStyleClass("sapUiTinyMarginTopBottom"));
        },

        _onSubmit: function (oEvent) {
            // ...
        },

        renderer: function (oRm, oControl) {
            oRm.write('<div class="zgutCheckPriceWrap">');
            oRm.write('<div class="zgutPriceWrap">' + oControl.getValuePrice() + '</div>');
            oRm.renderControl(oControl.getAggregation("_label"));
            oRm.renderControl(oControl.getAggregation("_button"));
            oRm.write('</div>');
        }
    });
});

UI5 version: 1.92

解决方案

You missed adding some mandatory control data in the render function. When the model value changes (e.g. ODataModel receiving data), the control with the bound property needs to be identifiable by an id at least so that the control can be updated. In your case, the id was not rendered.

To add the required control data, use:

• oRm.openStart("div", oCotrol) in case of the new semantic rendering (UI5 ≥ 1.67).
• oRm.writeControlData(oControl) in case of the now-deprecated string-based rendering (UI5 ≤ 1.66). Note: please use .writeEscaped for oControl.getValuePrice() here to avoid XSS.

Also, make sure to call the super function if you overwrite borrowed methods (e.g. init). This is especially important for lifecycle hooks.

Sample: https://embed.plnkr.co/gnmPoh3KS7L3DDXZ?show=controls%2FCheckPrice.js,preview

---

See the API reference: sap/ui/core/RenderManager for more information.

这篇关于自定义 UI5 控件不更新绑定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！