Question

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

我的代码工作到了可以更新任何部分中的datepicker值的程度，以下部分将正确更新其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已正确设置，但是我的minDate未设置新添加的datepicker元素。

如果我单步执行我的脚本代码，我可以看到的唯一区别是，即使在我执行的时候，我的部分视图已被渲染，而我的$（元素）确实是一个对象，但确实没有ID属性。这是我在工作代码和非工作代码之间看到的唯一区别。

在动态添加的元素上设置minDate可以让任何人认为这是我的问题的可能原因吗？

Answer 1

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

ko.applyBindings(yourViewModel, yourNewDomElement);

Answer 2

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

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

Answer 3

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

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());

无法设置动态添加元素的minDate

3 个答案: