Question

为什么TimePicker在淘汰赛名单之外运作良好，但在他身上不起作用。如何在淘汰赛名单中推出？

@{
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绑定时，Knockout会为列表中的每个项目创建DOM元素。当你进行timepicker初始化时，它们不存在。

（另外，你不能在HTML文档中使用相同的ID两次。你的电话只会找到第一个。）

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

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

然后你会用它来绑定它。

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

可能需要在绑定处理程序中完成更多工作。其他人用他们自己的timepicker绑定处理程序写了an example fiddle。

Answer 2

您面临的主要问题是您在定义viewmodel并应用绑定之前尝试定义JqueryUI TimePicker。这基本上意味着此时您的DOM节点不存在。

为了避免这种情况，我建议您使用knockout foreach中的“afterRender（节点，元素）”选项： http://knockoutjs.com/documentation/foreach-binding.html

这样您的DOM节点就会存在，因此您的输入可以“转换”为TimePickers

顺便说一句，删除KO foreach部分内的“id”，它没用（KO将在每个节点中生成另一个唯一的UI）

希望这有帮助

淘汰赛列表中的JQuery timepicker

2 个答案: