CODEWITHSUNDEEP
jquerysingle-page-applicationdurandal
SidC
SidC

Reputation: 3203

Javascript is not rendering in my SPA

I have the following written in my home.js file:

 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();
}
});

My home.html file contains the following:

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

The Bootstrap classes are not rendering the layout I've specified. Additionally, the JQuery multi select and the ckEditor are not rendering either. I've double checked that the solution file contains jquery, bootstrap etc. What other things do I need to change to ensure that the javascript is rendered correctly?

Upvotes: 0

Views: 332

Answers (2)

Alexander Preston
Alexander Preston

Reputation: 1665

It looks to me like your module definition function is returning (return vm;) before the other functions are being defined.

Move the vm creation and return statements to below the other functions and you should start to see your expected behaviour.

It's not best practice though, like Evan said you should leverage the viewAttached lifecycle function for manipulating the DOM.

Upvotes: 1

Evan Larsen
Evan Larsen

Reputation: 9965

Your viewmodel active method is probably being called by durandal but I'm not seeing anything in your activate method that would call the rest of the functions in your amd module. Also, by looking at the code you have posted I think you might run into a hoisting problem.

Also, if you trying to get a reference to a dom object on your view then you will want to use do that not in the activate function but inside the viewAttached function.

activate happens in the lifecycle before the viewmodel has been bound to the view and before it has been attached to the dom.

viewAttached happens in the lifecycle after the viewmodel has been bound to the view and after it has been attached to the dom.

Upvotes: 1

Related Questions