【发布时间】：2018-03-17 21:10:45
【问题描述】：
我编写了一个包含计划日历 SAPUI5 控件的应用程序。我受到这个演示的启发： https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.PlanningCalendarSingle/preview
我在将模型绑定到 xml 视图中的日历控件时遇到问题。
在上面的演示中，模型在控制器中被硬编码，如下所示：
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "08", "8", "0"),
people: [{
name: "John Miller",
appointments: [{
start: new Date("2016", "10", "15", "10", "0"),
end: new Date("2016", "11", "25", "12", "0"),
title: "Team collaboration",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2016", "09", "13", "9", "0"),
end: new Date("2016", "01", "09", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2016", "07", "10", "0", "0"),
end: new Date("2016", "09", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2016", "07", "1", "0", "0"),
end: new Date("2016", "09", "31", "23", "59"),
title: "New quarter",
type: "Type10",
tentative: false
},
{
start: new Date("2017", "0", "03", "0", "01"),
end: new Date("2017", "0", "04", "23", "59"),
title: "Workshop",
info: "regular",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "05", "08", "30"),
end: new Date("2017", "0", "05", "09", "30"),
title: "Meet Donna Moore",
type: "Type02",
tentative: false
},
{
start: new Date("2017", "0", "08", "10", "0"),
end: new Date("2017", "0", "08", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "09", "0", "0"),
end: new Date("2017", "0", "09", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type02",
tentative: false
},
{
start: new Date("2017", "0", "11", "0", "0"),
end: new Date("2017", "0", "12", "23", "59"),
title: "Education",
info: "",
type: "Type03",
tentative: false
},
{
start: new Date("2017", "0", "16", "00", "30"),
end: new Date("2017", "0", "16", "23", "30"),
title: "New Product",
info: "room 105",
type: "Type04",
tentative: true
},
{
start: new Date("2017", "0", "18", "11", "30"),
end: new Date("2017", "0", "18", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "0", "20", "11", "30"),
end: new Date("2017", "0", "20", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "0", "18", "0", "01"),
end: new Date("2017", "0", "19", "23", "59"),
title: "Working out of the building",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "23", "08", "00"),
end: new Date("2017", "0", "24", "18", "30"),
title: "Discussion of the plan",
info: "Online meeting",
type: "Type04",
tentative: false
},
{
start: new Date("2017", "0", "25", "0", "01"),
end: new Date("2017", "0", "26", "23", "59"),
title: "Workshop",
info: "regular",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "2", "30", "10", "0"),
end: new Date("2017", "4", "33", "12", "0"),
title: "Working out of the building",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "8", "1", "00", "30"),
end: new Date("2017", "10", "15", "23", "30"),
title: "Development of a new Product",
info: "room 207",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "1", "15", "10", "0"),
end: new Date("2017", "2", "25", "12", "0"),
title: "Team collaboration",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "2", "13", "9", "0"),
end: new Date("2017", "3", "09", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2017", "03", "10", "0", "0"),
end: new Date("2017", "05", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2017", "07", "1", "0", "0"),
end: new Date("2017", "09", "31", "23", "59"),
title: "New quarter",
type: "Type10",
tentative: false
}
],
headers: [
{
start: new Date("2017", "0", "08", "0", "0"),
end: new Date("2017", "0", "08", "23", "59"),
title: "National holiday",
type: "Type04"
},
{
start: new Date("2017", "0", "10", "0", "0"),
end: new Date("2017", "0", "10", "23", "59"),
title: "Birthday",
type: "Type06"
},
{
start: new Date("2017", "0", "17", "0", "0"),
end: new Date("2017", "0", "17", "23", "59"),
title: "Reminder",
type: "Type06"
}
]
}
]
});
this.getView().setModel(oModel);
另一方面，XML 视图看起来像这样：
<PlanningCalendar
id="PC1"
showRowHeaders="false"
startDate="{path: '/startDate'}"
viewKey="Day"
rows="{path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
intervalSelect="handleIntervalSelect"
showEmptyIntervalHeaders="false">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
<ToolbarSpacer/>
<ToggleButton icon="sap-icon://decrease-line-height"
tooltip="Toggle Day Names Line"
press="toggleDayNamesLine"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
appointments="{path : 'appointments', templateShareable: 'true'}"
intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
icon="{pic}"
title="{title}"
text="{info}"
type="{type}"
tentative="{tentative}">
</unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
icon="{pic}"
title="{title}"
type="{type}">
</unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
我复制了完全相同的代码，但有一处不同。我的模型不是默认视图模型，但它有一个 ID：
this.getView().setModel(oModel, "calendarModel");
当然，由于这种变化，我无法在我的 xml 视图中写入：
rows="{path: '/people'}"
相反，我写的是这样的：
<PlanningCalendar id="PC1" showRowHeaders="false" startDate="{path: '/startDate'}" viewKey="Day" rows="{path: 'calendarModel>/people'}"
appointmentsVisualization="Filled" appointmentSelect="handleAppointmentSelect" intervalSelect="handleIntervalSelect"
showEmptyIntervalHeaders="false">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
<ToolbarSpacer/>
<ToggleButton icon="sap-icon://decrease-line-height" tooltip="Toggle Day Names Line" press="toggleDayNamesLine"/>
</toolbarContent>
<rows>
<PlanningCalendarRow appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}"></unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
问题是，我看不到任何约会。计划日历控件仍然显示一行（因为该模型中只有一个人），但它完全是空的。
我怀疑我的路径有问题：
<PlanningCalendarRow appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
但我不知道如何正确写。
重要提示：如果我将“calendarModel”模型更改为默认视图模型（没有 ID），则一切正常。我可以从我的模型中查看所有约会。
【问题讨论】：
-
将型号名称添加到所有内容中，而不仅仅是第一个条目：
path: 'calendarModel>appointments'、{calendarModel>tentative}等 -
不幸的是，它没有帮助：/ 不过，我看不到任何约会。
标签： javascript json xml sapui5