使用Durandal的compose时，JQuery不会找到DOM元素

我最近使用Knockout和JQuery将我公司的项目移植到Durandal。 直接问题：我需要使用两个HTML输入初始化JQuery UI的datepicker。 但是，当我这样做时，JQuery无法找到输入：

视图：

 
 
 
 
 
User detail
 
  

viewmodel – 在第一个div中选择用户时调用SelectUser（）函数，然后加载第二个div和users / _UserDetail.html：

 users.SelectUser = function (user) { users.CurrentUser(user); /* ... */ $(function () { $("#datepickerFrom").datetimepicker({ dateFormat: "dm yy", timeFormat: "HH:mm:ss", defaultDate: null }); $("#datepickerTo").datetimepicker({ dateFormat: "dm yy", timeFormat: "HH:mm:ss" }); }); } 

_UserDetail.html的重要部分

 
 Active from 
  
 
 
 Active to 
  
  

然后两个HTML输入未定义。 如果我使用compose绑定到实际用户/ _UserDetail.html内容更改div ，它可以正常工作，但随后视图很快变得一团糟 – html文件并不是很小。 如果有人能指出我正确的方向，我将不胜感激。 谢谢！

Answer 1

在这种情况下，您需要一个Knockout绑定处理程序。

在某些情况下，绑定处理程序可能会遇到组合生命周期的问题，如果是这种情况并且您使用的是Durandal 2，则可以使用方法composition.addBindingHandler 。 否则只需使用ko.bindingHandlers 。

您需要在shell.js或main.js创建绑定，以便它们在所有应用程序中都可用。 使用以下代码：

  var composition = require('durandal/composition'); composition.addBindingHandler('datetimepicker', { init: function (element, valueAccessor) { var activeTo = valueAccessor(); //What do you want to do with this value? $(element).datetimepicker({ dateFormat: "dm yy", timeFormat: "HH:mm:ss", defaultDate: null //Maybe use activeTo here? }); } }); 

在您的用户界面中：

注意：

此代码可能不起作用，但您绝对应该使用此方法来创建此类控件并使用Durandal的组合生命周期。

Answer 2

很确定问题是这个：

 users.SelectUser = function (user) { servers.CurrentUser(user); /* ... */ $(function () { $("#datepickerFrom").datetimepicker({ dateFormat: "dm yy", timeFormat: "HH:mm:ss", defaultDate: null }); $("#datepickerTo").datetimepicker({ dateFormat: "dm yy", timeFormat: "HH:mm:ss" }); }); } 

你有一个函数内的jQuery datepicker init代码。 这意味着它只会在调用SelectUser函数时运行。 尝试将其移到任何function之外。