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

我最近使用Knockout和JQuery将公司的项目移植到Durandal。直截了当的问题是：我需要使用两个HTML输入初始化jQueryUI的日期选择器。但是，在执行以下操作时，JQuery无法定位输入：

视图：

_UserDetail.html的重要部分

---

然后，这两个HTML输入是未定义的。如果我用compose绑定将div更改为实际的users/\u UserDetail.html内容，效果会很好，但是视图很快就会变得一团糟——html文件并不是很小。如果有人能给我指出正确的方向，我将不胜感激。谢谢

可以肯定的是，问题在于：

users.SelectUser = function (user) {
    servers.CurrentUser(user);

    /* ... */

    $(function () {
        $("#datepickerFrom").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss",
            defaultDate: null
        });

        $("#datepickerTo").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss"
        });
    });
}

---

在函数中有jQuery datepicker初始化代码。这意味着它将仅在调用SelectUser函数时运行。尝试将其移到任何函数之外。

可以肯定问题在于：

users.SelectUser = function (user) {
    servers.CurrentUser(user);

    /* ... */

    $(function () {
        $("#datepickerFrom").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss",
            defaultDate: null
        });

        $("#datepickerTo").datetimepicker({
            dateFormat: "d. m. yy",
            timeFormat: "HH:mm:ss"
        });
    });
}

---

在函数中有jQuery datepicker初始化代码。这意味着它将仅在调用SelectUser函数时运行。尝试将其移到任何函数之外。

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

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

您需要在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: "d. m. yy",
                   timeFormat: "HH:mm:ss",
                   defaultDate: null   //Maybe use activeTo here?
                  });
            }
         });

在用户界面中：

 <input type="text" data-bind="datetimepicker: ActiveTo" id="datepickerTo" />

注:

---

这段代码可能不起作用，但您肯定应该使用这种方法来创建此类控件，并使用Durandal的合成生命周期。

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

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

您需要在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: "d. m. yy",
                   timeFormat: "HH:mm:ss",
                   defaultDate: null   //Maybe use activeTo here?
                  });
            }
         });

在用户界面中：

 <input type="text" data-bind="datetimepicker: ActiveTo" id="datepickerTo" />

注:

---

这段代码可能不起作用，但您肯定应该使用这种方法来创建此类控件，并使用Durandal的合成生命周期。

您应该创建一个自定义绑定处理程序，并在视图中使用它。还要阅读关于DOM操作的durandal文档：您正在调用加载视图的代码吗？或者这是由框架处理的？你是指编写：代码吗？该函数由框架调用，但在触发SelectUser时触发-当我从users/\u UsersList.html中选择用户时调用此函数。您应该创建一个自定义绑定处理程序并在视图中使用它。还要阅读关于DOM操作的durandal文档：您正在调用加载视图的代码吗？或者这是由框架处理的？你是指编写：代码吗？这是框架调用的，但是当触发SelectUser时它会触发-当我从users/\u UsersList.html中选择一个用户时我调用这个函数。谢谢你的回答，但是当触发SelectUser函数时，然后加载_users/UserDetail.html和两个输入-这两个DOM元素在此之前都不存在，然后使用$document.ready并不是正确的方法，因为视图是通过AJAX加载的，所以ready事件已经触发。您建议我使用什么来代替$？您需要弄清楚是否可以连接到durandal的合成机制。大多数框架都会公开一个事件，当内容加载/添加到DOM中时会触发该事件。这就是你要设置日期选择器的地方。好的，我会再次尝试阅读他们的文档，现在我知道我需要查找什么了谢谢。谢谢您的回答，但是当触发SelectUser函数时，会加载_users/UserDetail.html和两个输入-这两个DOM元素在此之前不存在。那么，使用$document.ready并不是正确的方法，由于视图是通过AJAX加载的，ready事件已经触发。您建议我使用什么来代替$？您需要弄清楚是否可以连接到durandal的合成机制。大多数框架都会公开一个事件，当内容加载/添加到DOM中时会触发该事件。这就是你要设置日期选择器的地方。好的，我会再次尝试阅读他们的文档，现在我知道我需要查找什么了谢谢。工作完美无瑕。谢谢，祝你今天愉快！：工作完美无瑕。谢谢，祝你今天愉快！：