控件渲染器中的数据绑定

时间:2015-01-14 14:52:56

标签: javascript sapui5

如何在自定义控件的渲染器中使用模型中的数据绑定? m.getProperty(" / time / 0 / hours")函数返回undefined。跨度中的绑定,
oRm.write(" {/ time / 0 / hours}")返回文字字符串,如果没有引号则返回错误。

我有一个带有自定义控件的XML视图:

<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>

控制器:

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");
  }

});

我的自定义控件:

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>");

1 个答案:

答案 0 :(得分:1)

无论如何,您不应该在渲染器中编辑Control。渲染器只应该编写在页面上呈现Control所需的HTML。 模型绑定已经在您的控制器中发生。作为视图中的元素,您的自定义控件将继承模型并能够使用它。 在渲染器中,您只需访问将由模型设置的控件的属性。

查看:

<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>

控制:

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>");