Call Function on View Loaded (Activate) in Hot Towel/Durandal Single Page App

Question

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>

Answer 1

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