Bootstrap Hover Dropdown Plugin not works in durandal view nav.html

Question

I am using hot towel SPA template. i am trying to use at Bootstrap Hover Dropdown Plugin but hover over drop down effect never triggers.

nav.html contains

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
    Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">My Account</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Change Email</a></li>
    <li><a tabindex="-1" href="#">Change Password</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Logout</a></li>
</ul>

Steps to reproduce. 1) create Application using Hot Towel SPA template 2) add bootstrap-hover-dropdown.min.js in vendors bundel 3) replace the nav.html code with the code above.

same nav.html code pasted above applicationHost div does trigers hover drop down effect. But when injected using durandal. it doesn't work.

Answer 1

Here is what you need to do to have the dropdown hover working:

• in your nav.html file: remove the last line <script src="../../TemplateFiles/assets/hover-dropdown/bootstrap-hover-dropdown.js"></script>not needed here.

• in your shell.js file: add the following function:

  function compositionComplete() {
      $('[data-hover="dropdown"]').dropdownHover();
  }
  

And also modify your shell var as below:

    var shell = {
        activate: activate,
        compositionComplete: compositionComplete,
        router: router
    };

That's all!

The trick here: in the compositionComplete function I 'force' the initialisation of the dropdown hover effect. If you take a look in the plugin source file, at the end of the file you have this:

$(document).ready(function() {
    // apply dropdownHover to all elements with the data-hover="dropdown" attribute
    $('[data-hover="dropdown"]').dropdownHover();
});

In a more 'classic' situation you have nothing to do (except reference the source plugin). The problem with Durandal is that this is not triggered so I do it in the compositionComplete.

Hope I'm clear.