Question

我创建了一个自定义控件，并在sapui5中创建了它的两个对象。在onAfterRendering函数的customControl.js中，我编写了一个setInterval代码，它将定期更新自定义控件的value属性。我在视图中创建自定义控件：

<controls:customControl
    id="customID1"
    value="50"/>
<controls:customControl
    id="customID2"
    value="70"/>

这是我的控制：

CustomControl.prototype.onAfterRendering = function()
{
    setInterval(this.updateControl(this), 500);
}

但是，当此方法有效时，它会更新具有相同值的所有自定义控件对象。所以当我将第一个控件的value属性更新为52并将第二个控件的value属性更新为72时。但我只能看到两个控件的72值。

我还尝试在我的onAftering方法中使用sap.ui.core.IntervalTrigger方法，如下所示：

var iT = new sap.ui.core.IntervalTrigger(500);
iT.addListener(this.updateControl, this);

但这不起作用，我上次尝试使用闭包但它不再起作用。

(function(self){   
    var iT = new sap.ui.core.IntervalTrigger(500);
    iT.addListener(self.updateGauge, self);
})(this);

Answer 1

@melomg，您应该发布一些更多细节，包括自定义控件和updateControl函数的实现。无论如何，我只能猜出出了什么问题......这是一个运行良好的例子（见下面的代码）。检查代码中的注释以获取更多信息，尤其是因为您可能具有重新呈现循环问题（我只能猜到这一点）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5beta.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>

        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc"
                xmlns:nabisoft="nabisoft">

                <!-- use our custom control, see below -->
                <nabisoft:CustomControl id="one" value="1" interval="500"/>
                <nabisoft:CustomControl id="two" value="90000" interval="1000"/>

            </mvc:View>
        </script>

        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Custom Control ###              
                jQuery.sap.declare("nabisoft.CustomControl");
                sap.ui.core.Control.extend("nabisoft.CustomControl", {
                    metadata : {
                        properties : {
                          value : {type : "int"},
                          interval : {type : "int", default:500}
                        },
                        aggregations : {},
                        associations: {},
                        events : {}
                    },

                    init : function(){},
                    
                    onAfterRendering: function (){
                      setInterval(this.updateControl.bind(this), this.getInterval());
                    },
                    
                    updateControl : function () { 
                      var iOldValue = this.getValue();
                      var iNewValue = iOldValue + 1;
                      
                      // don't do this, because this will lead to a rerendering loop!!!
                      //this.setValue( iNewValue );
                      
                      //instead do this here:
                      this.setProperty("value", iNewValue,  true /*supress rerendering*/);
                      this.$().find("span").text(iNewValue);
                      
                    },

                    renderer : {
                        render : function(oRm, oControl) {
                            oRm.write("<div");
                            oRm.writeControlData(oControl);
                            oRm.addClass("nsCustomControl");
                            oRm.writeClasses();
                            oRm.write(">");
                            oRm.write("<div>" + oControl.getId() +" : <span>" + oControl.getValue() + "</span></div>");
                            oRm.write("</div>");
                        }
                    }
                });

                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

如何为每个自定义控件对象使用setInterval函数？

1 个答案: