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

0

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

Если я пройду через свой код сценария, единственное различие, которое я вижу, - это то, что даже мысль в момент, когда я прерываю выполнение, мое частичное представление было визуализировано, а мой $ (элемент) действительно является объектом, но у него нет атрибута идентификатора. Это единственное различие, которое я вижу между моим рабочим и нерабочим кодом.

Может ли кто-нибудь увидеть это как возможную причину моей проблемы с установкой minDate на динамически добавленный элемент?

Теги:
knockout.js
jquery-ui-datepicker
custom-binding

3 ответа

0
Лучший ответ

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

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

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

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

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

ko.applyBindings(yourViewModel, yourNewDomElement);
0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню