Requirejs 引导悬停下拉插件在durandal view nav.html中不起作用

我正在使用热毛巾水疗模板。 我正在尝试使用at，但悬停在下拉效果上不会触发

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） 在bundel中添加bootstrap-hover-dropdown.min.js 3） 用上面的代码替换nav.html代码

---

粘贴在applicationHost div上方的相同nav.html代码不会触发悬停下拉效果。但当使用杜兰达注射时。它不起作用

要使下拉悬停正常工作，您需要执行以下操作：

• 在nav.html文件中：删除此处不需要的最后一行

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

中执行

---

希望我说得清楚。

给我拉上你的VS解决方案的拉链，我会看一看。非常感谢Zip fie，我只是想表达我的感激之情。非常感谢你。我已经等了好几个星期了。在这上面花了很多晚上。非常感谢。一个问题是，我实际上使用的是html5 css模板。模板附带许多与UI相关的javascript文件。e、 g.滑块。和我的滑块在尝试使用durandal视图插入时不起作用的方式相同。所以我也应该为这些做同样的事情？i、 e.触发ready函数？？有一个函数可以触发slider jQuery（“#layerslider”）。layerslider（{我把这段代码放在compositionComplete:）非常感谢。：）是的，请尝试同样的操作。如果您仍然有问题，请尽管问我，我会尽力帮助您。祝您好运！