twitter-bootstrap – Durandal 2.0中的Bootstrap下拉列表

发布时间：2020-12-17 20:37:24 所属栏目：安全来源：网络整理

导读：我试图在durandal 2.0 app中连接一些bootstrap下拉导航： ul class="nav nav-pills" li class="dropdown" a class="dropdown-toggle" data-toggle="dropdown" href="#" spanDropdown/span b class="caret"/b /a ul class="dropdown-menu" lia tabindex="-1"

我试图在durandal 2.0 app中连接一些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'
       }
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!