1

I wanted to avoid lumping onto this existing question.

So I'm trying to use that JSFiddle but within the Durandal framework where I have the main.js configured with the require bindings (please notice the observable: true): 

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'modules/logger', 'modules/bindings', 'modules/hubService'], function (system, app, viewLocator, logger, bindings, hubService) {

app.configurePlugins({
    router: true,
    dialog: true,
    widget: true,
    observable: true
});

I've set up a bindings.js with the composite binding handler like so:

 composition.addBindingHandler('datePicker', {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var unwrap = ko.utils.unwrapObservable;
        var dataSource = valueAccessor();
        var binding = allBindingsAccessor();
        var options = {
            keyboardNavigation: true,
            todayHighlight: true,
            autoclose: true,               
            format: 'mm/dd/yyyy'
        };
        if (binding.datePickerOptions) {
            options = $.extend(options, binding.datePickerOptions);
        }
        $(element).datepicker(options);
        $(element).datepicker('update', dataSource);
        $(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);

            }
        });
        //handle removing an element from the dom
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker('remove');
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).datepicker('update', value);
    }
});

While this works in the JSFiddle, it throws an error when using the code in the Durandal framework.

The View comes up and I can use the datepicker but it throws an error on the following line:

 observable(dateVal);

Anyone have a clue as to how to get this to work with Durandal's usage of observables?

Community
  • 1
  • 1
user3490778
  • 11
  • 2
  • Could you post your fiddle? –  Dec 07 '14 at 19:18
  • Unfortunately I do not have a fiddle. If you look at the link in my post you'll see a link to the fiddle I copied but I can't get it to work within the Durandal framework as I tried to explain above. – user3490778 Dec 08 '14 at 18:49
  • What feedback are you getting in the debugger? What version of Durandal are you using? My first line of attack might be to set the observable plugin to `false`, and try this with standard Knockout observables. Also, I will need to see more of how you're bringing this up in Durandal. –  Dec 09 '14 at 04:30
  • Durandal, by default, uses Knockout for data-binding, so, is there any particular reason you're using the [observable](http://durandaljs.com/documentation/Binding-Plain-Javascript-Objects.html) plug-in? – Brett Dec 10 '14 at 20:28
  • Brett, Eric -- thanks for the reply but I've not driven deep into Durandal but from what I know it was considered a best practice to set observable: true this way Durandal initiates the getter/setter for everything but I don't want to get off track. Does anyone have a working example using the Durandal framework with a datepicker? – user3490778 Dec 11 '14 at 17:44
  • have a look at http://makingsense.github.io/moment-datepicker/ it has a knockout binding handler that you may be able to adjust for your needs – Nathan Fisher Dec 22 '14 at 05:19
  • Can you post your HTML usage of the binding? What is the error on that line? I suspect that you've done something like `data-bind="datePicker : Value()"` when you actually need `data-bind="datePicker : Value"` – Shaun Rowan Dec 30 '14 at 18:11
  • HTML looks like this: – user3490778 Jan 07 '15 at 20:47
  • I've tracked down a full blown example from a genuine SPA guru. Check out Prasanna and his Github samples. Truly inspiring: https://github.com/prasannapattam – user3490778 Jan 12 '15 at 16:08

0 Answers0