Durandal - 激活 DOM 后运行 datePicker

Posted 2023-03-27

【中文标题】Durandal - 激活 DOM 后运行 datePicker

【英文标题】：Durandal - Run datePicker after the DOM activated

【发布时间】：2019-01-14 14:43:49

【问题描述】：

我在文本框内添加了一个数据选择器（应该保存选定的日期），当我按下文本框时它应该激活。 html 代码：

<input type="text" class="textboxes" data-bind="value:request().ExpiredDateTO"  id="tbToDate" />

当我按下文本框时，日期选择器不起作用，但是当我运行时：

$("#tbToDate").datepicker();

在 Chrome 的控制台中，它工作正常。 我把 jQuery 脚本放在了

self.activate 

但是....它仅在我在控制台中运行脚本时才有效。

【问题讨论】：

你能发布一个小提琴来详细说明你的视图模型吗？

【参考方案1】：

如果将来有人需要它...我找到了答案... 我使用了延迟： Defferd - mozilla article (very good)

和 jQuery api

我有一个激活函数，我在开头添加了延迟：

   self.activate = function (data) 


    var deferred = $.Deferred();.....

然后我把activate放在最后：

        //run the scripts when evry thing else is done 
        deferred.resolve().then(function () 
            $.datepicker.regional['he'];
            $("#tbToDate").datepicker();
            $("#tabs").tabs();
        );
    );
    return deferred.promise();

声明。 它使工作完成。

【讨论】：

只是为了确认一下，是否需要在每次 DOM 刷新时调用 .datepicker() ？那么每次文本框重新加载时，您都需要使用 jQuery 重新应用日期选择器吗？如果这就是你正在做的，那么我可以向你展示一种更优雅的方式:)

您好，每次 DOM 刷新时都需要调用它...您能展示一下优雅的方式吗？

【参考方案2】：

更好的解决方案是为此创建一个自定义绑定处理程序。然后该功能将可重用，您甚至可以（可选）设置本地化。

ko.bindingHandlers['datepicker'] = 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
        var region = valueAccessor();
        if (region) 
            $.datepicker.regional[region];
        
        $(element).datepicker();
    
;

然后像这样在你的模板中使用它：

<input type="text" class="textboxes" data-bind="value: request().ExpiredDateTO, datepicker: 'he'" id="tbToDate" />