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

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();它就会调出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.