Question

我目前正在学习SAPUI5，并为自己创建了一个小应用程序，可以练习和学习。在提出问题之前，我将提供一些有关我的应用程序的简短信息，以便您了解我正在尝试做的事情以及预期的结果。

应用程序是什么？

此应用程序唯一要做的就是为用户提供日历和表格。如果用户单击日期，则表中应填写该日期和两个时间选择器，以提供所选日期的开始和结束时间。对于每个日期，都应创建一个新行。

实际问题：

问题是我猜是设计问题。桌子上充满了日期和时间选择器，但是我想这是一种不好的做法。我将选择的日期存储在两个模型中，一个用于日历，一个用于将其绑定到表格的副本。这项工作和日期已保存，我可以通过模型访问数据。当将新日期添加到表中时，这两个时间选择器也会被添加，因为它们是在XML视图的ColumnListItem中提供的，但是没有模型绑定到它们上，我也无法访问时间选择器的值，例如通过ID。这就是问题所在，直到现在我还没有找到如何将它们绑定到模型的正确方法或其他干净方法，也没有访问创建的时间选择器的值的方法。

问题：

您将如何以一种干净的方式实现此目的，以便时间选择器可以正确地绑定到一个或多个模型？您可以访问他们的数据？如果您能给我一些建议或暗示，我应该以一种干净的方式来实现它，将不胜感激，因为我想从中学习，并且不想为了获得更短的目标而开始尝试不良做法。

相关源代码：

控制器：

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>

亲切的问候

Maximilian

Answer 1

我创建了一个小例子：

https://next.plnkr.co/edit/OGmJimjF2YZ46mv6DsF2?preview

几点：

我只是向选定日期添加了一些属性（startTime和endTime）。现在，您可以使用时间选择器修改时间，更改将存储在模型中。
压延机的数据绑定似乎已损坏。我还必须使用getSelectedDates。这可能是由于singleSelection="false"造成的。使用单一选择时，您可以通过数据绑定访问选定的日期（或间隔）。
从不访问内部属性（oEvt.oSource）。有用于此（oEvt.getSource()）的访问器。

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

1 个答案: