0

我有一个网页，它有一个重复的部分视图，它被绑定到一个 Knockout 模板。在该视图中，我有一个日期选择器。该视图可以在单击按钮时添加任意次数。在第 1 节中选择日期，在第 2 节中设置日期选择器的 minDate，依此类推。每个部分都有自己的 Knockout 视图模型，它有一个 minDate 可观察的。附加到这个 observable，我有一个带有更新处理程序的自定义绑定 - 当添加或更新部分时，我使用它来更新元素的 minDate。

我的代码工作到可以更新任何部分中日期选择器的值的程度，并且下一部分将正确更新其 minDate。这是我的自定义绑定的代码：

ko.bindingHandlers.minDate = {
    update: function (element, valueAccessor, allBindings, viewModel) {
        var value = valueAccessor();
        var valueUnwrapped = ko.unwrap(value);
        var oneDay = 1000 * 60 * 60 * 24;
        var diff = Math.ceil((new Date(valueUnwrapped) - new Date()) / oneDay);
        $(element).datepicker('option', 'minDate', diff + 1);
    }
};

我的问题是，如果我有选择日期的现有部分，然后单击添加新部分，我可以看到我新添加的视图模型的 minDate 设置正确，但是我新添加的 datepicker 上没有设置 minDate元素。

如果我单步执行我的脚本代码，我能看到的唯一区别是，即使在我中断执行的那一刻，我的部分视图已经被渲染，并且我的 $(element) 确实是一个对象，但它没有 ID 属性。这是我可以看到的工作代码和非工作代码之间的唯一区别。

任何人都可以将此视为我在动态添加的元素上设置 minDate 问题的可能原因吗？

4

3 回答 3

1

根据您添加新 DOM 元素的方式，您可能需要ko.applyBindings在创建它时调用它。

ko.applyBindings(yourViewModel, yourNewDomElement);
于 2014-05-28T14:46:16.870 回答
0

在我添加动态部分的代码中，我最初有：

var newSection = new Components.Booking.TripViewModel();
var prevTrip = last(self.model.trips());
newSection.model.minDate(prevTrip.model.departureDate());
self.model.trips.push(newTrip);

当我意识到当我将一个新的视图模型添加到我的部分集合时，这就是模板呈现我的部分视图并应用绑定等的点，这也是为元素分配 ID 的时候。我只需要颠倒最后两行的顺序，以确保我的 minDate observable 在元素绑定后更新，因此当我的自定义绑定中的更新处理程序在元素完全呈现后触发时。

self.model.trips.push(newTrip);
newSection.model.minDate(prevTrip.model.departureDate());
于 2014-05-28T23:44:02.437 回答
0

由于安全性，jquery 1.10.1 没有将内容动态添加到文档中的控件。您可以使用 jQuery 1.7.1 版本并使用 .live() 方法来处理事件。

这是解决这个问题的简单方法。

于 2014-05-28T01:48:51.477 回答