修改

Question

我在视图中编写它，然后尝试在结果上调用.datepicker（），但没有任何反应。

撰写容器

<div>
<!--ko compose: { model:'viewmodels/schedule', view: 'views/schedule.html', activate:true} -->
<!--/ko-->
</div>

schedule.html

<div class="schedule-editor">

</div>

和计划模块

define([], function () {
    var vm = {
        activate: activate,
    };
    return vm;

    function activate() {
        $('.schedule-editor').datepicker();
        console.log("activated schedule module");
        return true;
    }
});

控制台记录“激活的计划模块”，但未创建日期选取器。如果我转到chrome控制台并运行jQuery调用， $('.schedule-editor').datepicker();它可以很好地调出日期选择器。

Durandal文档声称在DOM完全组合后调用activate函数，所以我不知道还有什么可以尝试。

Answer 1

与nemesv一样，您应该使用viewAttached代替。

define([], function () {
    var vm = {
        viewAttached: viewAttached,
    };
    return vm;

    function viewAttached(view) {
        $(view).find('.schedule-editor').datepicker();
        console.log("activated schedule module");
        return true;
    }
});

在将模型数据绑定到新视图之前以及将视图添加到dom之前，生命周期中会发生激活。 viewAttached在视图数据绑定到模型并附加到dom之后发生。

修改

Durandal 2.0已将viewAttached重命名为attached

Answer 2

还有另一种方法可以保持knockout.js和durandal正在努力争取的声明性UI哲学。

它允许您在HTML中声明日期选择器，如下所示：

<div class="schedule-editor" data-bind="
    jqueryui: { 
        widget: 'datepicker', 
        options: { 
            // you can set options here as per the jquery ui datepicker docs
        } 
    }">

</div>

只需包含此要点中的jquery ui widget绑定：https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

确保在加载jquery，jquery ui和knockout后包含上面的javascript。

Drangendal激活函数内部的.datepicker调用无法正常工作

2 个答案:

修改