Заполнение bootstrap-datepicker с помощью Knockout

У меня есть загрузочный виджет выбора даты, который отлично работает с Knockout: т.е. я могу выбрать дату, и модель корректно обновляется. Однако я не могу изначально указать дату, когда я впервые инициализирую свою модель.

Вот мой HTML:

<div class="controls">
<input type="text" class="datepicker" data-date-format="dd-mm-yyyy" data-bind="datepicker: someDate" />
<div data-bind="text: someDate"></div>

And the corresponding JavaScript:

var self = this;

$('.datepicker').datepicker();    

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());
            widget.setValue();            
        }
    }
}; // end KO binding datepicker

function AppViewModel() {
    self.someDate = ko.observable(new Date('01/01/2004'));    
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

И соответствующий JSFiddle: http://jsfiddle.net/philcms1/0mftjtk4/2/

Как заполнить виджет при первой привязке модели?


person Phil    schedule 16.09.2014    source источник
comment
Вы можете проверить рабочий пример здесь jsfiddle.net/0mftjtk4/3 (взято из codinglookseasy.blogspot.in/2014/07/knockoutjs.html)   -  person G_S    schedule 16.09.2014
comment
Спасибо! Я добавляю пропущенный value: someDate в моей привязке. Если вы опубликуете это как ответ, я приму это.   -  person Phil    schedule 16.09.2014
comment
Остались проблемы?   -  person G_S    schedule 16.09.2014


Ответы (2)


Вы можете проверить рабочий пример здесь здесь (взято из Codinglookseasy)

Как вы сказали, использование value: myDate устранило вашу проблему.

person G_S    schedule 16.09.2014

value:someDate определенно является более явным способом, но вы также можете просто вызвать метод jquery datepicker setDate в обратном вызове инициализации, как показано на

http://jsfiddle.net/zkgp0b4b/1/

person ke4mtg    schedule 16.09.2014
comment
Я также пытаюсь обновить наблюдаемое, используя тайм-аут для имитации отложенного. Он обновляет модель, но не виджет: jsfiddle.net/philcms1/zkgp0b4b/2. Есть идеи, почему? - person Phil; 16.09.2014
comment
Я не знаю, что не так с вашим кодом, но это связано с тем, как работает средство выбора даты, а не с нокаутом. jsfiddle.net/o22uy8wc/1 Вот версия, которая устанавливает дату так же, как и сделано в функции инициализации - person ke4mtg; 17.09.2014