JQuery timepicker in knockout list

Question

Why TimePicker working well outside knockout list, but does not work in him. How to launch it in knockout list?

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<link href="~/Scripts/timepicker/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Scripts/timepicker/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Scripts/timepicker/site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/timepicker/bootstrap-datepicker.js"></script>
<script src="~/Scripts/timepicker/jquery.timepicker.min.js"></script>
<script src="~/Scripts/timepicker/site.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<div class="demo">
    <h2>Basic Example</h2>
    <p><input id="basicExample" type="text" class="time" /></p>
</div>

<table>
<thead>
    <tr>
        <th>Passenger name</th>
        <th>Time</th>
    </tr>
</thead>
<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="text: name"></td>
        <td><input id="basicExample" type="text" class="time" data-bind="value: time"/></td>
    </tr>
</tbody>
</table>

<script>
    $('#basicExample').timepicker();
function MyViewModel() {
    var self = this;
    self.items = ko.observableArray();
    self.items = [{ name: 'Jhon', time: '12:00' }, { name: 'Nick', time: '11:00' }];
}

ko.applyBindings(new MyViewModel());
</script>

Answer 1

When you use a foreach binding, Knockout is creating DOM elements for each of the items in your list. They are not there when you do you timepicker initialization.

(Also, you can't use the same ID twice in an HTML document. Your call will only find the first one.)

For any widget that needs to be initialized, you should have a custom binding handler. It might be as simple as this:

ko.bindingHandlers.timePicker = {
  init: function (el) {
    $(el).timepicker();
  }
}

Then you would use that to bind it.

<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="text: name"></td>
        <td><input type="text" class="time" data-bind="timepicker: true, value: time"/></td>
    </tr>
</tbody>

Probably there needs to be more done in the binding handler than that. Someone else wrote an example fiddle with their own timepicker binding handler.

Answer 2

The main problem you are facing here is that you are trying to define the JqueryUI TimePicker before you have defined your viewmodel and apply the bindings. That means basically that your DOM nodes do not exist at this point.

To avoid that I would recommend you using the "afterRender(nodes, elements)" option in knockout foreach: http://knockoutjs.com/documentation/foreach-binding.html

This way your DOM nodes will be there and so your inputs can be "transformed" into TimePickers

BTW, remove the "id" inside the KO foreach part, it´s useless (KO will generate another unique UI in each node)

Hope this helps