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

旧城冷巷雨未停 提交于 2019-12-11 14:45:12

问题


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.


回答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.



来源:https://stackoverflow.com/questions/24690027/bootstrap-hover-dropdown-plugin-not-works-in-durandal-view-nav-html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!