我正在尝试在 durandal 2.0 应用程序中连接一些 Bootstrap 下拉导航:
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span>Dropdown</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#/view/a>Option A</a></li>
<li><a tabindex="-1" href="#/view/b">Option B</a></li>
</ul>
</li>
</ul>
单击“下拉菜单”会导致 Durandal 的路由器尝试导航到根路由(即“#”或“”)。并且从不打开菜单。这个对吗?解决方法?
更新
标签也有同样的问题:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
最佳答案
这个问题其实很简单。与路由模块没有冲突。我假设启动工具包中默认包含 Bootstrap javascript,但事实并非如此。
修复就像在我的 require 依赖项中添加额外的行一样简单:
var system = require('durandal/system'),
app = require('durandal/app'),
viewLocator = require('durandal/viewLocator');
require('bootstrap');
请注意,我的 require.config 是:
require.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-2.3.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
关于twitter-bootstrap - Durandal 2.0 中的 Bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17842163/