I'm using the Hot Towel SPA project I'm trying to call a simple js function when a view is activated. What I'm seeing is that the item does not seem to be loaded when the activate function is called.

I've also tried putting the code in an initialize function called by activate as suggested on other SO posts. This does not seem to help.

So what is the recommended method in Durandal/HotTowel for calling a function on view load?

home.js (view model)

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

    return vm;

    function activate() {       
        logger.log('Home View Activated', null, 'home', true);
        return init();
    }

    function init() {
        $("#backBtn").hide();
        console.log($("#myBtn").html()); // returns undefined 
    }
});

home.html (view)

<section>  
  <div id="myBtn">test</div>
</section>

I'm using the Hot Towel SPA project I'm trying to call a simple js function when a view is activated. What I'm seeing is that the item does not seem to be loaded when the activate function is called.

I've also tried putting the code in an initialize function called by activate as suggested on other SO posts. This does not seem to help.

So what is the recommended method in Durandal/HotTowel for calling a function on view load?

home.js (view model)

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

    return vm;

    function activate() {       
        logger.log('Home View Activated', null, 'home', true);
        return init();
    }

    function init() {
        $("#backBtn").hide();
        console.log($("#myBtn").html()); // returns undefined 
    }
});

home.html (view)

<section>  
  <div id="myBtn">test</div>
</section>

• javascript
• html
• single-page-application
• durandal
• hottowel

3 Answers 3

According to the latest Durandal docs at Interacting with the DOM, viewAttached renamed to attached, so you code using Durandal 2 will be the following:

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

return vm;

function activate() {       
    logger.log('Home View Activated', null, 'home', true);
}

function attached(view, parent) {
    $(view).find("#backBtn").hide();
    console.log($(view).find("#myBtn").html()); 
}
});

When durandal attaches a view model it looks over that model for the viewAttached method. I modified your code below. It should find the jQuery elements you are looking for.

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

    return vm;

    function activate() {       
        logger.log('Home View Activated', null, 'home', true);
    }

    function viewAttached(view) {
        $(view).find("#backBtn").hide();
        console.log($(view).find("#myBtn").html()); 
    }
});

Take a look at the Composition page at the bottom for a little more about viewAttached. http://durandaljs.com/documentation/Using-Composition.html

According to the Durandal docs at Interacting with the DOM, view models have 4 callbacks they can implement in order to interact with DOM elments, each of which is passed a DOMElement representing the view:

• getView
• beforeBind
• afterBind
• viewAttached

It states that viewAttached is the most commonly used hook. See the docs for more detailed descriptions of each of the callbacks. You can see the full lifecycle in a table at the bottom of Hooking Lifecycle Callbacks.

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

    return vm;

    function activate() {       
        logger.log('Home View Activated', null, 'home', true);
        return init();
    }

    function getView(view) {
    }

    function beforeBind(view) {
    }

    function afterBind(view) {
    }

    function viewAttached(view) {
        $("#backBtn").hide();
        console.log($("#myBtn").html()); // returns undefined 
    }
});