Question

我有一个自定义控件，它在详细信息视图页面中插入了多个属性。我已使用这些属性绑定了数据。场景是我有两个页面，一个是列表视图，然后是详细视图。我从详细页面导航并从主页面中选择差异产品。详细信息页面根据所选产品显示差异产品详细信息。一切正常。但问题是我的自定义控件没有更新值而其他页面有更新的值。

<custom:product topic="" subTopic="{product>name}" id="productDetial"></custom:product>

我使用过一种方法this.getView().byId("productDetail").rerender();，但它并没有更新我的内部控制HTML。

控制代码。可能是一些拼写错误。我已经更改了一些变量名称并删除了不需要的代码。目的是展示我使用的方法以及我的方法

sap.ui.define([
        "sap/m/Label",
        "sap/m/Button",
        "sap/m/CustomTile"

    ], function(Label, Button, CustomTile) {
        "use strict";
        jQuery.sap.declare("testProduct.control.product");
        return CustomTile.extend("testProduct.control.product", {
                metadata: { // the Control API
                    properties: {
                        name: {
                            type: "string",
                            defaultValue: "--"
                        },
                        subTopic: {
                            type: "string",
                            defaultValue: "--"
                        }
                    }

                },
                init: function() {

                },

                rerender: function(oRM, oControl) {

                },
                renderer: function(oRM, oControl) {
                    oRM.write('<div class=" sapMTile customTileCourseDetail">');
                    oRM.write('<div class="leftTileYourScore">');
                    if (oControl.getSubTopic() !== "" && oControl.getSubTopic() !== undefined) {
                        oRM.write(oControl.getSubTopic());
                    } else {
                        oRM.write("&nbsp;");
                    }
                    oRM.write('</div>');
                    oRM.write('</div>
                    }
                });
        });

Answer 1

哟只需要在你的控件中添加一个setter函数。当刷新/更改绑定时，UI5将触发特定于该属性的setter方法。所以在你的情况下，属性subTopic它需要一个方法setSubTopic。此方法应定义您自己的逻辑，以根据您的需要更新UI层中的所述属性。

以下是您需要添加的代码的一部分，您还需要稍微调整一下初始渲染逻辑。

renderer: function (oRM, oControl) {
        //oRM.write('<div class=" sapMTile customTileCourseDetail">');
        oRM.write("<div")
        oRM.writeControlData(oControl);
        oRM.addClass("sapMTile customTileCourseDetail");
        oRM.writeClasses();
        oRM.write(">");
        oRM.write('<div class="leftTileYourScore">');
        if (oControl.getSubTopic() !== "" && oControl.getSubTopic() !== undefined) {
            oRM.write(oControl.getSubTopic());
        } else {
            oRM.write("&nbsp;");
        }
        oRM.write('</div>');
        oRM.write('</div>');
    },

    setSubTopic: function(sText){
        this.setProperty("subTopic", sText, true);
        $("#"+this.sId+" .leftTileYourScore").html(sText);
    }

模型更改时刷新sapui5中的自定义控件

1 个答案: