Начальная загрузка с помощью базы данных knockout.js

Этот вопрос похож наknockoutjs привязка данных с помощью jquery-ui datepicker, но вместо указателя даты jQueryUI я хотел бы использовать один изBootstrap Datepickers.

API для DatePicker Bootstrap отличается от jquery-ui, и у меня возникают некоторые проблемы, когда я пытаюсь заставить его работать с knockout.js. Я создалJSFiddle, чтобы попробовать это.

Похоже, что DatePicker Bootstrap может быть намного проще в использовании, потому что он не хранит дату независимо. Однако я хотел бы знать, является ли jsFiddle подходящим способом использования виджета DatePicker Bootstrap с knockout.js, т.е.

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {};
      $(element).datepicker(options);

      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });
    },
    update: function(element, valueAccessor) {
    }
};

Ответы на вопрос(4)

даты. Входные данные не были инициализированы значением наблюдаемого. Я сделал обновленную привязку, к которой я добавил это:

$(element).datepicker('update', dataSource());

Кажется, это помогает.

Вот обновленная скрипка, в которой используются последние доступные средства выбора даты, Bootstrap, jQuery и Knockout:http: //jsfiddle.net/krainey/nxhqerxg

Обновить

Я столкнулся с некоторыми трудностями из-за того, что средство выбора даты не играло хорошо с наблюдаемым, когда пользователь вручную редактировал значение в текстовом поле. Инструмент немедленно проанализирует дату и вставит результат в поле ввода.

Если пользователь попытался отредактировать, например, 10/07/2014, и использовал клавишу Backspace или delete для удаления числа (10/0/2014), результирующее значение было бы проанализировано немедленно и вставлено в текстовый ввод. Если значение было на мгновение 10.10.2014, средство выбора переместило бы календарь на 30.09.2014 и вставило это значение в текстовое поле. Если бы я попытался отредактировать месяц, и значение было на мгновение 7 января 2014 года, средство выбора переместится на 7 января 2014 года и вставит это значение в текстовое поле.

Вы можете увидеть это поведение на этой скрипке:

http: //jsfiddle.net/krainey/nxhqerxg/10

Мне пришлось обновить привязку с помощью специального обработчика для определения фокуса и связать одноразовое событие размытия, чтобы оно правильно обрабатывало ручное редактирование.

$(element).on("changeDate", function (ev) {
    var observable = valueAccessor();
    if ($(element).is(':focus')) {
        // Don't update while the user is in the field...
        // Instead, handle focus loss
        $(element).one('blur', function(ev){
            var dateVal = $(element).datepicker("getDate");
            observable(dateVal);
        });
    }
    else {
        observable(ev.date);
    }
});

Скрипка, на которую ссылается исходный ответ, была обновлена, чтобы отразить это:

http: //jsfiddle.net/krainey/nxhqerxg

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

    var unwrap = ko.utils.unwrapObservable;
    var dataSource = valueAccessor();
    var binding = allBindingsAccessor();

    //initialize datepicker with some optional options
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);
    $(element).datepicker('update', dataSource());
    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function (event) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
            value(event.date);
        }
    });
},
update: function (element, valueAccessor) {
    var widget = $(element).data("datepicker");

    var value = ko.utils.unwrapObservable(valueAccessor());

    //when the view model is updated, update the widget
    if (widget) {
        widget.date = value;
        if (widget.date) {
            widget.setValue();
            $(element).datepicker('update', value)
        }
    }
}};
 Sean Thorburn09 апр. 2018 г., 01:03
Обновление работал с этим. Спасибо
Решение Вопроса

как вы можете сделать это с помощью инструмента выбора даты, который вы используете:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {};
      $(element).datepicker(options);

      //when a user changes the date, update the view model
      ko.utils.registerEventHandler(element, "changeDate", function(event) {
             var value = valueAccessor();
             if (ko.isObservable(value)) {
                 value(event.date);
             }                
      });
    },
    update: function(element, valueAccessor)   {
        var widget = $(element).data("datepicker");
         //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            if (widget.date) {
                widget.setValue();            
            }
        }
    }
};

Это не выглядело так, как будто есть какая-то функция уничтожения, поэтому я удалил эту часть. Это обрабатывает виджетыchangeDate событие для обновления модели представления, когда пользователь меняет дату.updateункция @ обрабатывает изменения модели представления для обновления виджета.

Если вы хотите связать значение с ненаблюдаемым, тогда потребуется немного больше кода. Дайте мне знать, если это то, что вам нужно поддерживать.

http: //jsfiddle.net/rniemeyer/KLpq7

 RP Niemeyer21 июн. 2012 г., 05:07
Вот обновление для привязки кchange событие, чтобы ответить на изменения в поле ввода: Jsfiddle.net / rniemeyer / uQcCx / 3
 RP Niemeyer19 мар. 2013 г., 14:18
@ dtjmsy Я обновил скрипку.
 dtjmsy19 мар. 2013 г., 09:46
JsFiddles выше, похоже, больше не работает, вы вносили какие-то изменения с тех пор?, Протестировали chrome и firefox, datepicker больше не отображается. Приветствия
 Brian M. Hunt21 июн. 2012 г., 03:05
Вот JsFiddle, который имеет более подходящую строку-> дату преобразования при обновлении поля. У этого все еще есть предостережение, что только изменения через виджет зарегистрированы; внесение изменений в поле ввода не обновляет модель.
 voam15 апр. 2013 г., 23:32
Я заметил, что этот пример больше не работает в том смысле, что начальной датой выбора даты не является дата в текстовом поле. Это та самая ошибка, которую я пытаюсь исправить в своем собственном коде. Любые идеи

Вот что я закончил

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional options

    var options = {
        autoclose: true,
        format: 'yyyy-mm-dd',
    }

    //var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function (event) {
        var value = valueAccessor();

        if (ko.isObservable(value)) {
            var myDate = event.date;
            var month = myDate.getMonth() + 1;
            var monthText = month;

            if (month < 10)
                monthText = "0" + month;

            var day1 = parseInt(myDate.getDate());
            var dayText = day1;

            if (day1 < 10)
                dayText = '0' + day1;

            value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
        }
    });
},
update: function (element, valueAccessor) {

    var widget = $(element).data("datepicker");
    //when the view model is updated, update the widget
    if (widget) {
        widget.date = ko.utils.unwrapObservable(valueAccessor());
        widget.setValue(widget.date);
    }
}};

Ваш ответ на вопрос