javascript - JQuery 时间选择器进入 knockout 名单

Question

为什么TimePicker在 knockout 名单之外工作得很好，但在他身上就不行了。如何在 knockout 中启动？

@{
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

当您使用 foreach 绑定(bind)时，Knockout 将为列表中的每个项目创建 DOM 元素。当您进行 timepicker 初始化时，它们并不存在。

(此外，您不能在 HTML 文档中使用相同的 ID 两次。您的调用只会找到第一个 ID。)

对于任何需要初始化的小部件，您应该有一个自定义绑定(bind)处理程序。它可能像这样简单:

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

然后你可以用它来绑定(bind)它。

<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>

绑定(bind)处理程序中可能还需要做更多的事情。其他人写了an example fiddle使用自己的时间选择器绑定(bind)处理程序。