Не удается установить minDate динамически добавленного элемента

Question

У меня есть веб-страница, которая имеет повторяющийся частичный вид, который привязан к шаблону нокаута. Внутри этой точки зрения у меня есть дампикер. Это представление можно добавить любое количество раз при нажатии кнопки. Выбор даты в разделе 1, устанавливает minDate datepicker в разделе 2 и так далее. Каждый раздел имеет свою собственную модель представления нокаута, которая имеет наблюдаемый minDate. Прикрепленный к этому наблюдаемому, у меня есть специальная привязка с обработчиком обновления - я использую это для обновления 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

В моем коде, где я добавить динамические разделы, я изначально был:

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

Когда я понял, что, когда я добавил новую модель представления в моей коллекции раздела, то есть точка, в которой template отображает мое частичное представление и применяет привязки и т. д., что также, когда этому элементу присваивался идентификатор. Мне просто нужно было отменить порядок двух последних строк, чтобы обновить мой наблюдаемый minDate после того, как элемент был связан, и, следовательно, когда обработчик обновления в пользовательском привязке загорается после того, как элемент был полностью отображен.

self.model.trips.push(newTrip); 
newSection.model.minDate(prevTrip.model.departureDate());  

Answer 2

Из-за безопасности jquery 1.10.1 не имеет элементов управления с динамически добавленным содержимым в документ. Вы можете использовать версию jQuery 1.7.1 и использовать метод .live() для обработки событий.

Это простой способ работать с этой проблемой.

Answer 3

В зависимости от того, как вы добавляете новый элемент DOM, вам может потребоваться позвонить ko.applyBindings на нем, когда он будет создан.

ko.applyBindings(yourViewModel, yourNewDomElement);