SAPUI5 Custom Control Aufruf Funktion in Renderer-Methode

Question

Ich bin ziemlich neu zu SAPUI5 und JavaScript Thema.

Derzeit versuche ich ein benutzerdefiniertes Steuerelement zu entwickeln. Ich versuche, eine selbst definierte Funktion in der Renderer-Methode aufrufen, aber zur Laufzeit bekomme ich immer diese Fehlermeldung:

Error: Uncaught TypeError: this.someFunction is not a function.

Ich benutzte die das Tutorial-Code von SAP zu veranschaulichen, wie mein Code strukturiert ist.

Kann jemand antworten. Ich bin mir ziemlich sicher, dass es mit JavaScript und nicht mit UI5 zu tun hat.

Mein Code unten:

sap.ui.define([ 
    "sap/ui/core/Control", 
    "sap/m/RatingIndicator", 
    "sap/m/Label", 
    "sap/m/Button" 

], function (Control, RatingIndicator, Label, Button) { 
    "use strict"; 
    return Control.extend("sap.ui.demo.wt.control.ProductRating", { 
     metadata : { 
      properties : { 
       value: {type : "float", defaultValue : 0} 
      }, 
      aggregations : { 
       _rating : {type : "sap.m.RatingIndicator", multiple: false, visibility : "hidden"}, 
       _label : {type : "sap.m.Label", multiple: false, visibility : "hidden"}, 
       _button : {type : "sap.m.Button", multiple: false, visibility : "hidden"} 
      }, 
      events : { 
       change : { 
        parameters : { 
         value : {type : "int"} 
        } 
       } 
      } 
     }, 
     init : function() { 
      this.setAggregation("_rating", new RatingIndicator({ 
       value: this.getValue(), 
       iconSize: "2rem", 
       visualMode: "Half", 
       liveChange: this._onRate.bind(this) 
      })); 
      this.setAggregation("_label", new Label({ 
       text: "{i18n>productRatingLabelInitial}" 
      }).addStyleClass("sapUiTinyMargin")); 
      this.setAggregation("_button", new Button({ 
       text: "{i18n>productRatingButton}", 
       press: this._onSubmit.bind(this) 
      })); 
     }, 

     setValue: function (iValue) { 
      this.setProperty("value", iValue, true); 
      this.getAggregation("_rating").setValue(iValue); 
     }, 

     _onRate : function (oEvent) { 
      var oRessourceBundle = this.getModel("i18n").getResourceBundle(); 
      var fValue = oEvent.getParameter("value"); 

      this.setValue(fValue); 

      this.getAggregation("_label").setText(oRessourceBundle.getText("productRatingLabelIndicator", [fValue, oEvent.getSource().getMaxValue()])); 
      this.getAggregation("_label").setDesign("Bold"); 
     }, 

     _onSubmit : function (oEvent) { 
      var oResourceBundle = this.getModel("i18n").getResourceBundle(); 

      this.getAggregation("_rating").setEnabled(false); 
      this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelFinal")); 
      this.getAggregation("_button").setEnabled(false); 
      this.fireEvent("change", { 
       value: this.getValue() 
      }); 
     }, 
     renderer : function (oRM, oControl) { 
      oRM.write("<div"); 
      oRM.writeControlData(oControl); 
      oRM.addClass("myAppDemoWTProductRating"); 
      oRM.writeClasses(); 
      oRM.write(">"); 
      oRM.renderControl(oControl.getAggregation("_rating")); 
      oRM.renderControl(oControl.getAggregation("_label")); 
      oRM.renderControl(oControl.getAggregation("_button")); 
      oRM.write("</div>"); 

      this.someFunction(); 
     }, 

     someFunction: function(){ 
      //Do something 

     } 


    }); 
}); 

Answer 1

Die Steuerung ist völlig in Ordnung, und so sind die Funktionen. Allerdings denke ich, dass, da Sie eine renderer Funktion bereitstellen, this Kontext nicht mehr in der Steuerung selbst ist; Sie sollten stattdessen oControl verwenden.

Ihr Code sollte also funktionieren, wenn Sie wie folgt verwenden:

 renderer : function (oRM, oControl) { 
      oRM.write("<div"); 
      oRM.writeControlData(oControl); 
      oRM.addClass("myAppDemoWTProductRating"); 
      oRM.writeClasses(); 
      oRM.write(">"); 
      oRM.renderControl(oControl.getAggregation("_rating")); 
      oRM.renderControl(oControl.getAggregation("_label")); 
      oRM.renderControl(oControl.getAggregation("_button")); 
      oRM.write("</div>"); 

      oControl.someFunction(); 
     }, 

     someFunction: function(){ 
      //Do something 
     }