Question

我在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 multi select和ckEditor也不呈现。我已经仔细检查了解决方案文件是否包含jquery，bootstrap等。我需要更改哪些其他内容以确保正确呈现javascript？

Answer 1

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

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

activate在视图模型绑定到视图之前以及之前已连接到dom之前的生命周期中发生。

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

Answer 2

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

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

这不是最好的做法，就像Evan说你应该利用viewAttached生命周期函数来操纵DOM。

Javascript未在我的SPA中呈现

2 个答案: