如何将日历和两个时间选择器正确绑定到sap.m.table？

我正在学习SAPUI5，并为自己创建了一个小应用程序，可以通过练习来学习 . 在我回答我的问题之前，我将提供一些关于我的应用程序的简短信息，以便您知道我想要做什么以及预期结果应该是什么 .

What does the app?

该应用程序唯一能做的就是为用户提供日历和表格 . 如果用户点击了某个日期，则该表格应填入此日期和两个时间选择器，以指定所选日期的开始和结束时间 . 对于每个日期，应创建一个新行 .

The actual problem:

我想问题是设计问题 . table 上充满了日期和时间选择器，但我这样做的方式是，我猜是不好的做法 . 我将选定的日期存储在两个模型中，一个用于日历，一个用于将其绑定到表格 . 这工作和日期保存，我可以通过模型访问数据 . 当新的日期被添加到表中时，两个时间选择器也会被添加，因为它们是在XML视图中的ColumnListItem中提供的，但是没有模型绑定到它们，也没有访问时间选择器的值，例如通过身份证 . 这就是问题，直到现在我找不到如何将它们绑定到模型或其他清洁方式以及访问创建的时间选择器的值的正确方法 .

The question:

你将如何以一种干净的方式实现这一点，以便时间选择器以正确的方式绑定到一个或多个模型？你可以访问他们的数据吗？如果你能给我一个建议或提示我应该如何以干净的方式实现这一点，我会感激不尽，因为我想从中学到这一点，并且不想为了在更短的时间内实现目标而开始讨论不良做法 .

相关源代码：

控制器：

var CalendarController = Controller.extend("sap.ui.unified.sample.CalendarMultipleDaySelection.CalendarMultipleDaySelection", {
        oFormatYyyymmdd: null,
        oModel: null,
        onInit: function(oEvt) {
            this.oFormatYyyymmdd = sap.ui.core.format.DateFormat.getInstance({
                pattern: "dd.MM.yyyy",
                calendarType: sap.ui.core.CalendarType.Gregorian
            });
            this.oModel = new JSONModel({
                selectedDates: []
            });
            this.oCopyModel = new JSONModel({
                selectedDates: []
            });
            var oCalendar = this.getView().byId("calendar");
            oCalendar.setModel(this.oModel);
        },
        handleCalendarSelect: function(oEvt) {
            var oCalendar = oEvt.oSource;
            var aSelectedDates = oCalendar.getSelectedDates();
            console.log(aSelectedDates);
            var oDate;
            var oData = {
                selectedDates: []
            };
            var oTable = this.getView().byId("dateTable");


            if (aSelectedDates.length > 0) {
                for (var i = 0; i < aSelectedDates.length; i++) {
                    oDate = aSelectedDates[i].getStartDate();
                    oData.selectedDates.push({
                        Date: this.oFormatYyyymmdd.format(oDate)
                    });
                }
                this.oModel.setData(oData);
                if (this.oCopyModel.getProperty("/selectedDates/length") >= 0) {
                    this.oCopyModel.setData(oData);
                    oTable.setModel(this.oCopyModel);
                }
            } else {
                this._clearModel();
            }
        },
        return CalendarController;

视图：

<content>
<unified:Calendar id="calendar" select="handleCalendarSelect" intervalSelection="false" singleSelection="false"/>
<Table id="dateTable" items="{path: '/selectedDates', sorter: {path: 'Date', comparator: '.dateComperator'}}"mode="None" fixedLayout="true">
    <columns>
        <Column>
            <header>
                <Text text="Date"/>
            </header>

        </Column>
        <Column>
            <header>
                <Text text="Beginning"/>
            </header>
        </Column>
        <Column>
            <header>
                <Text text="End"/>
            </header>
        </Column>
    </columns>
    <ColumnListItem>
        <Text text="{Date}"/>
        <TimePicker value="10:00" valueFormat="HH:mm" displayFormat="HH:mm" change="handleChange"/>
        <TimePicker value="11:00" valueFormat="HH:mm" displayFormat="HH:mm" change="handleChange"/>
    </ColumnListItem>
</Table>

亲切的问候

马克西米利安