Using a custom javascript script file with durandal template - single-page-application

Question

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?

Answer 1

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.

Answer 2

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>