自定义控件渲染两次

Question

我正在使用自定义控件扩展 sap.ui.unified.Calendar，覆盖 renderDays() 函数，以便在每一天放置一个额外的 span 标签 div。

控制台指示小时数数组未定义。它抛出下面发现的错误，但之后继续工作。此错误会阻止使用 header 箭头在日历中的月份之间移动。这是渲染了两次吗？为什么一开始 hours[] 未定义但之后就可以了？

如果我把所有的代码放到一个JSBin文件中，它不会报错。 JSBin

自定义控件的代码顶部：

sap.ui.unified.Calendar.extend("control.TimeCalendar", {
    metadata : {
        properties : {
            "hoursData" : "string[]"
        }
    },

  renderer: {
    renderDays: function(oRm, oCal, oDate){
        var hours = oCal.getHoursData();

控制台输出：

Cannot read property 'length' of undefined

自定义控件摘录TimeCalender.js。这是在 do...while 循环中，它把每一天都放在日历上。在函数放置日期的地方，我还包含一个带有从数组 'hours'.

检索到的数字的 span 标记

oRm.write("<span class=\"sapUiCalDayNum\">");

if ( (hours.length>i) && (hours[i].day == oDay.getUTCDate()) ) {
    oRm.write("<span class=\"hours\">");
    oRm.write(hours[i].hours);
    oRm.write("</span>");
    if(i <= hours.length) { i++; }
}

oRm.write(oDay.getUTCDate());
oRm.write("</span>");

Answer 1

猜测一下，我会说在您使用数据绑定的非 jsbin 场景中，数据要么是从后端异步接收的，要么是在第一次渲染后设置的？

在那种情况下，小时数据值设置为未定义，这会导致错误。

如果您这样定义属性：

properties : {
    "hoursData" : { type: "string[]", defaultValue: [] }
}

...这样你就可以确保总是有一个数组，其长度为属性.

自定义控件渲染两次

Custom control rendering twice

javascript

sapui5