Javascript 未在我的 SPA 中呈现答案

【问题标题】：Javascript is not rendering in my SPAJavascript 未在我的 SPA 中呈现
【发布时间】：2013-04-10 03:19:34
【问题描述】：

我的 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？

【问题讨论】：

在很早的时候听起来像一个 javascript 错误（或缺少 javascript 库，如 jquery）是你的问题
您的控制台日志中有哪些错误？
没有错误。当我调试项目时，页面呈现但不是 CKEditor 或多选。

标签： jquery single-page-application durandal

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

viewAttached 发生在 viewmodel 绑定到 view 和附加到 dom 之后的生命周期中。

【讨论】：