Bootstrap悬停下拉插件不工作在durandal视图

Question

我使用热毛巾SPA模板。我试图使用在Bootstrap悬停下拉插件，但悬停下拉效果从未触发。

nav.html包含

<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>

复制步骤。1)使用热毛巾SPA模板创建应用程序2)在vendor bundle中添加bootstrap-hover-dropdown.min.js3)用上面的代码替换nav.html代码。

相同的nav.html代码粘贴在applicationHostdiv上，触发悬停下拉效果。但是当注射时用的是durandal。这行不通。

Answer 1

你需要做的是让下拉鼠标悬停工作:

• 在你的nav.html文件中:删除最后一行不需要的<script src="../../TemplateFiles/assets/hover-dropdown/bootstrap-hover-dropdown.js"></script>

• 在shell.js文件中添加以下函数:

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

和修改你的shell变量如下:

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

就是这样!

这里的技巧:在compositionComplete函数中，我"强制"初始化下拉悬停效果。如果你看一下插件的源文件，在文件的末尾有这样的内容:

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

在更"经典"的情况下，你什么都不用做(除了引用源插件)。Durandal的问题是，这并没有触发，所以我在compositionComplete中这样做。

希望我讲清楚了