2016-02-29 49 views
1

为什么TimePicker在淘汰赛名单之外运作良好,但在他身上不起作用。如何在淘汰赛名单中发布它?JQuery 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> 

回答

1

当您使用每个列表中的项目的foreach结合,淘汰赛是创建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

0

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

为了避免这种情况我会使用“一个AfterRender(节点,单元)”选项,在淘汰赛的foreach建议您: http://knockoutjs.com/documentation/foreach-binding.html

这样你的DOM节点将在那里等你的输入可以“转化”成TimePickers

BTW,除去KO的foreach部内的 “ID”,it's没用(KO将产生在每个节点的另一独特UI)

希望这有助于