javascript - 将值传递给循环内动态创建的函数调用

Question

如何设置订阅，以便使用发生 date1 更改的月份的相应 date1 和 date2 值调用 date2Handler？

目前，更改任何月份的 date1 值都会调用 date2Handler，其中“月份”最近设置为 newSubItem。在下面的示例中，通过 dataViewModel.agenda.months[0].date1 上的订阅触发的函数有效地调用了 data2Handler(dataViewModel.agenda.months[2].date1, dataViewModel.agenda .months[2].date2) 而不是 data2Handler(dataViewModel.agenda.months[0].date1, dataViewModel.agenda.months[0].date2)(参见索引月份数组)。

如何优雅地修复它？

在实际应用中，月份可能会在页面生命周期内多次动态弹出和推送。

模型

var dataModel = {
    months: [],
    agenda: {
        months: [],
    },
};

var observableModel = ko.mapping.fromJS(dataModel);
ko.applyBindings(observableModel, document.getElementById("rootView"));

订阅更改事件

for (var i = 0; i < 3; i++) {
    dataViewModel.months.push(ko.mapping.fromJS({
        monthId: null
    }));
    var newSubItem = ko.mapping.fromJS({
        date1: null,
        date2: null
    });
    newSubItem.date1.subscribe(function() {
        date2Handler(newSubItem.date1, newSubItem.date2)
    });
    dataViewModel.agenda.months.push(newSubItem);
}

function date2Handler(date1, date2) {
    if (date2() == null) {
        date2(date1());
    }
}

Answer 1

由于 newSubItem.date1.subscribe 调用的异步方面，执行时，newSubItem 实际上是循环的最后一个值。

要更正此问题，您可能需要将此调用包装在一个自执行的匿名函数中以及时“卡住”您的变量:

(function (item) {
    newSubItem.date1.subscribe(function() {
        date2Handler(item.date1, item.date2)
    });
}(newSubItem));

它应该可以解决您的问题。