Question

我最近将 Durandal 集成到我的项目中，并且运行良好。但是，我确实遇到了导航栏中的引导程序下拉列表无法正常工作的问题。我通过添加以下JavaScript解决了这个问题：

$(document).ready(function () {
    $('a[data-toggle=dropdown').dropdown();
});

我很好奇这是否是预期的解决方案，或者我是否只是在破解我的方式而忽略了潜在的问题。在整合 Durandal 之前，导航栏在没有此代码的情况下运行良好，就像我之前在许多其他项目中多次完成一样。

Answer 1

Durandal这样做的方法是将您的小部件设置代码（在这种情况下为Bootstrap jQuery）放在模块的attached或compositionComplete挂钩中。逻辑是Durandal不知道你在UI中使用了哪些额外的小部件，所以，你必须告诉它。为此目的，在框架内方便地提供这些钩子。一旦Durandal完成绑定并附加视图，就可以运行一些自定义代码来完成UI。这与$(document).ready()为jQuery做的概念相同。

// this code assumes that jQuery is loaded globally
define(function(require){
  var vm = {
    //...
  };

  vm.attached = function() {
    $('a[data-toggle=dropdown').dropdown();
  };

  return vm;
});

Reference: Interacting with the DOM

RequireJS和Bootstrap（Navbar）下拉列表

1 个答案: