淘汰赛名单中的 JQuery 时间选择器答案

【问题标题】：JQuery timepicker in knockout list淘汰赛名单中的 JQuery 时间选择器
【发布时间】：2016-06-12 17:52:16
【问题描述】：

为什么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>

【问题讨论】：

标签： javascript jquery asp.net-mvc-4 knockout.js

【解决方案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>

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

【讨论】：

【解决方案2】：

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

为避免这种情况，我建议您在淘汰赛 foreach 中使用“afterRender(nodes, elements)”选项： http://knockoutjs.com/documentation/foreach-binding.html

这样你的 DOM 节点就在那里，所以你的输入可以“转换”成 TimePickers

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

希望对你有帮助

【讨论】：