Add Keith Wood Datepicker to Dynamic Knockout List

Question

I'm trying to add a Keith Wood Date Picker to a Knockout Dynamic List I've created a JS Fiddle here:http://jsfiddle.net/ELTfx/5/

I've created a unique ID for each input box that is created:

Knockout:

self.departureDateUniqueID=ko.observable("depDate"+ counter++);
self.departureDateUniqueIDHash = ko.computed(function () {
        return "'#" + self.departureDateUniqueID() + "'";
    });

HTML:

            <td><input data-bind="value: departureDate,attr: { 'id': departureDateUniqueID }" /></td>

I've then attempted to bind the datepicker to the object everytime a new entry is created in the list:

    // Operations
    self.addSeat = function() {
    var seat = new SeatReservation("", self.availableMeals[0]);
    self.seats.push(seat);
    alert (seat.departureDateUniqueIDHash());

    $(seat.departureDateUniqueIDHash()).datepick({
        autoSize: true, defaultDate: 0, selectDefaultDate: true,
        onSelect: function (dates) {
            var minDate = dates[0];
            seat.departureDate($.datepick.formatDate(minDate));
        }
    });
}

Alas however it's not working. I'm getting the error Uncaught Error: Syntax error, unrecognized expression: '#depDate0'

I'm guessing that JQuery hasn't got it in it's DOM yet.

Now I've googled this and various posts recommend the On clause.. but I can't quite figure out how to use it here.

Any hints appreciated!

Answer 1

I am guessing... you had unnecessary ' in creating id...

self.departureDateUniqueIDHash = ko.computed(function () {
        return "#" + self.departureDateUniqueID() + "";
    });

See DEMO