遍历ListView以匹配选定的日历

时间:2019-02-22 02:05:26

标签: javascript arrays listview qml v-play

我正在使用来自数组(listView)的数据填充日历中当前selectedDate上的calendarListModel个事件

从日历中选择新日期时,如果新选择的日期不存在任何事件,或者需要将列表视图替换为与新选择的日期匹配的新委托,则我需要更新列表,清除并保持空白。

我的数组是根据对firebase数据库的读取而创建的,该数据库按预期工作。我的数组的一个例子是;

calendarListModel: [
    {"date":2019-02-12,"name":"user1"},
    {"date":2019-02-13","name":"user1"},
    {"date":2019-02-12,"name":"user2"}
]

如果我将模型设置为calendarListModel,则无论listView上的日期如何,我的列表都会显示每个数据库条目。

我尝试过诸如此类的事情

model: calendarListView.date(calendar.selectedDate

还使用循环来访问数据,我没有成功,最近的示例如下:

function updateEvents() {
                    var eventModel = calendarListModel.find(
                                function(obj){
                                return obj.date === calendar.selectedDate.getDate(),
                                console.log(JSON.stringify(obj));
                                }
                            );
                    if (eventModel === undefined)
                        return eventListModel.length = [];
                    return eventListModel.push(eventModel)
                }

Calendar {
        id: calendar
        selectedDate: new Date()

        onSelectedDateChanged: {
            const day = selectedDate.getDate();
            const month = selectedDate.getMonth() + 1;
            const year = selectedDate.getFullYear();
            updateEvents()
        }
    }

            ListView {
            id:eventListView
            model: eventListModel
        }

我从JSON.stringify(obj)来的控制台日志似乎将我的数组拆分为单个对象,日志显示:

{"date":1549972800000,"name":"user1"} {"date":1550059200000,"name":"user1"} {"date":1549972800000,"name":"user2"}

但是执行此操作时,eventListVieweventModel保持空白?

我该怎么做才能纠正此问题或需要朝哪个方向工作?

1 个答案:

答案 0 :(得分:1)

您传递给find的函数有问题。

function(obj) {
    return obj.date === calendar.selectedDate.getDate(),     // <-- oh no! lé comma!
        console.log(JSON.stringify(obj));
}

请注意,您使用了逗号运算符,在JS中,该运算符将舍弃左侧的表达式并返回右侧的结果(此处为undefined,因为console.log返回)。在JS控制台上进行的快速测试表明,这不会产生并返回所需的结果(在您的情况下为布尔值)。

function comma() {
    return 1, console.log('blunder');
}
function noComma {
    console.log('success');
    return 1;
}

x = comma();    // blunder
y = noComma();  // success

console.log(x);  // undefined   //  but expected 1 ?!?
console.log(y);  // 1

您可能正在追求类似这样的东西:

function(obj) {
    console.log(JSON.stringify(obj));

    return obj.date === calendar.selectedDate.getDate();
}

但是,这会将...字符串(?)与整数(由getDate()返回)进行比较。您可能想代替

return new Date(obj.date).getDate() === calendar.selectedDate.getDate();

在返回布尔值时,它仍然记录obj

Read more about JavaScript's comma operator...