CODEWITHSUNDEEP
single-page-applicationdurandal
Bronzato
Bronzato

Reputation: 9342

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?

Upvotes: 2

Views: 1762

Answers (2)

John Papa
John Papa

Reputation: 22298

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.

Upvotes: 3

Juli&#225;n Yuste
Juli&#225;n Yuste

Reputation: 1472

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>

Upvotes: 1

Related Questions