Data binding in a control renderer

Question

How can I use data binding from a model in the renderer of a custom control? The m.getProperty("/time/0/hours") function returns undefined. The binding in the span,
oRm.write("{/time/0/hours}") returns the literal string, and errors if without quotes.

I have an XML view with a custom control:

<mvc:View
  controllerName="view.Calendar"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:c="control"
  xmlns="sap.m">

    <c:TimeCalendar 
      id="calIdView"
      hoursData="data.json" />

</mvc:View>

The controller:

sap.ui.controller("view.Calendar", {

  onInit: function(oEvent){
    jQuery.sap.includeStyleSheet("main.css");

    var oModel = new sap.ui.model.json.JSONModel("data.json");
    this.getView().setModel(oModel, "hours");
  }

});

And my custom control:

sap.ui.unified.Calendar.extend("control.TimeCalendar", {

    metadata : {
        properties : {
            "hoursData" : "string"
        }
    },


  // the part creating the HTML:
  renderer:{

    renderDays: function(oRm, oCal, oDate){
        if (!oDate) {
            oDate = oCal._getFocusedDate();
        }

        var sHoursData = oCal.getHoursData();
        var oModel = new sap.ui.model.json.JSONModel(sHoursData);
        oCal.setModel(oModel);
        var m = oCal.getModel("hours");
        console.log(m.getProperty("/time/0/hours"));

        ...

        oRm.write("<span class=\"hours\">");
        oRm.write("{/time/0/hours}");
        oRm.write("</span>");

hirse hirse · Accepted Answer · 2015-01-14T15:31:11

You shouldn't edit the Control in the renderer anyway. The renderer ist only supposed to write the HTML required to render the Control on the page. The Model Binding is already happening in your controller. As an element in the view your custom control will inherit the model and be able to use it. In the renderer you can just access the property of the control which is going to be set by the model.

View:

<mvc:View
  controllerName="view.Calendar"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:c="control"
  xmlns="sap.m">

    <c:TimeCalendar 
      id="calIdView"
      hoursData="{hours&gt;/time/0/hours}" />

</mvc:View>

Control:

sap.ui.unified.Calendar.extend("control.TimeCalendar", {
    metadata: {
        properties: {
            "hoursData": "string"
        }
    },
    renderer: {
        renderDays: function (oRm, oCal, oDate) {
            if (!oDate) {
                oDate = oCal._getFocusedDate();
            }

            oRm.write("<span class=\"hours\">");
            oRm.write(oCal.getHoursData());
            oRm.write("</span>");

Data binding in a control renderer

1 Answers