Q:

Using a custom javascript script file with durandal template

I work on a Visual Studio 2012 MVC4 Project with the Durandal template. In this template, the shell.js page gives us a quite simple menu solution where every elements are located on top. Personally I need something different. For that purpose, I have a javascript file named dropdown.js which allows me to show/hide sub menus. It works pretty well in a standard project but I was not able to do it working with the durandal template.
Here is what I try:
I added a reference to the dropdown.js script in the Index.chtml:
<script src="~/Scripts/dropdown.js"></script>

Then in the shell.html page, I would like to use it like this:
<li class="dropdown" data-role="dropdown">
    ...
    ...
</li>

Here is a little portion of the dropdown.js:
$(function () {
    alert('XXXX');
    $('[data-role="dropdown"]').each(function () {
        alert('YYYY');
        $(this).Dropdown();
    })
})

As you can see, each element decorated with the 'dropdown' class should have been catched. It doesn't work with durandal. I placed some alert boxes to check it. The alert 'XX' is showed but the alert 'YY' is never showed.
I searched a bunch of hours without success.
Any idea?

A:

Check out the life cycle events tha tyou can tap into for Durandal here 
viewAttached may help since you can tap into when the view and dom are ready.

A:

I think the problem is that when the dropdown.js function is executed before the menu renders and because of that the jquery selector doesn't catch any list item.
I think that your best option is to make a knockout binding to transform your list items in dropdowns.
The binding would look something like:
ko.bindingHandlers.dropdown= {
    init: function (element, valueAccessor, allBindingsAccessor) {
        $(element).Dropdown();
    },
    update: function (element, valueAccessor) {
    }
};

And in the view:
<li class="dropdown" data-bind="dropdown : {}">
    ...
    ...
</li>

