我写了一个包含Planning Calendar SAPUI5控件的应用程序。我受到了这个演示的启发： https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.PlanningCalendarSingle/preview
我在xml视图中将模型绑定到Calendar控件时出现问题。
在上面的演示中，模型在控制器内部硬编码，如下所示：
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），一切都运行正常。我可以看到我模特中的所有约会。
答案 0 :(得分：0)
由于您为模型指定了名称，因此需要在绑定上指定它。这应该有效：
<mvc:View
controllerName="sap.m.sample.PlanningCalendar.Page"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:unified="sap.ui.unified"
xmlns="sap.m">
<VBox class="sapUiSmallMargin">
<PlanningCalendar
id="PC1"
startDate="{model: 'calendarModel', path: '/startDate'}"
rows="{model: 'calendarModel', path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
showEmptyIntervalHeaders="false"
showWeekNumbers="true">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
icon="{pic}"
title="{name}"
text="{role}"
appointments="{model: 'calendarModel', path : 'appointments', templateShareable: 'true'}"
intervalHeaders="{model: 'calendarModel', path: 'headers', templateShareable: 'true'}">
<customData>
<core:CustomData key="emp-name" value="{calendarModel>name}" writeToDom="true"/>
</customData>
<appointments>
<unified:CalendarAppointment
startDate="{calendarModel>start}"
endDate="{calendarModel>end}"
icon="{calendarModel>pic}"
title="{calendarModel>title}"
text="{calendarModel>info}"
type="{calendarModel>type}"
tentative="{calendarModel>tentative}">
</unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment
startDate="{calendarModel>start}"
endDate="{calendarModel>end}"
icon="{calendarModel>pic}"
title="{calendarModel>title}"
type="{calendarModel>type}">
</unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
<Label text="Add available built-in views to the example:"/>
<MultiComboBox
selectionFinish="handleSelectionFinish"
width="230px"
placeholder="Choose built-in views">
<items>
<core:Item key="Hour" text="Hour" />
<core:Item key="Day" text="Day" />
<core:Item key="Month" text="Month" />
<core:Item key="Week" text="1 week" />
<core:Item key="One Month" text="1 month" />
</items>
</MultiComboBox>
</VBox>
</mvc:View>