10

我在视图中撰写此内容，然后尝试在结果上调用 .datepicker() ，但没有任何反应。

撰写容器

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

时间表.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 完全组合后调用的，所以我不知道还能尝试什么。

4

2 回答 2

11

就像 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

于 2013-03-22T23:10:38.277 回答
5

还有另一种方法可以忠实于 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 小部件绑定：https ://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

确保在加载 jquery、jquery ui 和敲除后包含上述 javascript。

于 2013-03-23T19:07:40.910 回答