自定义控件呈现两次

Custom control rendering twice

本文关键字：两次 自定义控件      更新时间：2023-09-26

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

控制台指示小时数组未定义。它会抛出下面发现的错误，但之后继续工作。此错误会阻止使用标题箭头在日历中的月份之间移动。这是两次渲染吗？为什么 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。这是在里面做...while 循环，将每一天放在日历上。在函数放置日期的地方，我还包含一个 span 标签，其中包含从数组 'hours' 中检索到的数字。

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

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

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

如果按如下方式定义属性：

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

。这样，您可以确保始终存在一个具有 length 属性的数组。

相关文章：