0

我的 home.js 文件中写了以下内容：

 define(['services/logger'], function (logger) {
 var vm = {
    activate: activate,
    title: 'Home View'
 };

 return vm;

 //#region Internal Methods
 function activate() {
    logger.log('Home View Activated', null, 'home', true);
    return true;
 }
 //#endregion
 var editor, html = '';

 function createEditor() {
    if (editor)
        return;

    // Create a new editor inside the <div id="editor">, setting its value to html
    var config = {};
    editor = CKEDITOR.appendTo('editor', config, html);
 } 

 function removeEditor() {
    if (!editor)
        return;

    // Retrieve the editor contents. In an Ajax application, this data would be
    // sent to the server or used in any other way.
    document.getElementById('editorcontents').innerHTML = html = editor.getData();
    document.getElementById('contents').style.display = '';

    // Destroy the editor.
    editor.destroy();
    editor = null;
}
function MultiSelect() {
    ("#Sites").multiselect();
}
});

我的 home.html 文件包含以下内容：

<section>
<h2 class="page-title" data-bind="text: title"></h2>
</section>
<section id ="Recipients">
 <article>
    <div class="row">
        <div class="span6">
        <label for="Study">Study: </label>
        <ul class="dropdown-menu" id="Study"></ul><br />
        <label for="Sites">Sites: </label>
        <ul class="dropdown-menu" data-bind="text: Sites" title="Sites" id="Sites" ></ul><br />
        <label for="Distribution">Distribution: </label>
        <input type="checkbox" data-bind="text: Distribution" title="Distribution" />
    </div><!-- span6 -->
    </div><!-- row -->
    <div class="row">
    <div class="span6">
        <label for="Recipients">Recipients: </label>
        <input type="checkbox" data-bind="text: Recipients" title="Recipients"/><br />
    </div><!-- span8 -->
    </div><!-- row -->
</article>
</section>

<section id ="Communication">
<article>
    <label for="SendFrom">Send From: </label>
    <label id="SendFrom"></label><br />
    <label for="Subject">Subject: </label>
    <input id="Subject" /><br />
    <div id="editor">

    </div>
</article>
</section>

Bootstrap 类没有呈现我指定的布局。此外，JQuery 多选和 ckEditor 也没有呈现。我已经仔细检查了解决方案文件是否包含 jquery、bootstrap 等。我还需要更改哪些其他内容以确保正确呈现 javascript？

4

2 回答 2

1

您的 viewmodel 活动方法可能被 durandal 调用，但我在您的activate方法中没有看到任何会调用 amd 模块中其余函数的内容。此外，通过查看您发布的代码，我认为您可能会遇到提升问题。

此外，如果您尝试在视图上获取对 dom 对象的引用，那么您将希望不在activate函数中而是在函数内部使用它viewAttached。

activate在视图模型绑定到视图之前和附加到 dom 之前的生命周期中发生。

viewAttached发生在 viewmodel 绑定到视图之后以及附加到 dom 之后的生命周期中。

于 2013-04-08T23:08:42.707 回答
1

在我看来，您的模块定义函数在定义其他函数之前正在返回（返回 vm;）。

将 vm 创建和返回语句移到其他函数下方，您应该开始看到预期的行为。

但这不是最佳实践，就像 Evan 说的那样，您应该利用 viewAttached 生命周期函数来操作 DOM。

于 2013-04-09T19:19:34.650 回答