Twitter bootstrap Durandal 2.0中的自举下拉列表

我正在尝试在durandal 2.0应用程序中连接一些引导下拉导航：

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

我在第一区

你好，我在第二区

您是否尝试过将包含元素的属性更改为div或span而不是锚定标记？

从长远来看，最好的选择可能是将这些引导窗口小部件转换为淘汰自定义绑定（例如），或者更好地转换为本机Durandal窗口小部件

查看Durandal 1.2 messageBox是如何实现的。这可以作为将引导选项卡和下拉列表转换为Durandal小部件的粗略指南。如您所见，视图中的属性已替换为

data bind=“click:…”

。此外，还必须将引导JavaScript转换为Durandal

viewmodel

e、 g

---

问题其实很简单。与路由模块没有冲突。我假设引导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'
       }
    }
});

---

对这将完全删除所有样式，并且仍然不会触发下拉列表。感谢您提供详细的答案。不幸的是，这并不能解决我的问题。此外，当所讨论的小部件依赖于一个可观察的对象时，击出自定义绑定是最好的，而在我的例子中则不是。不过，这还是很有帮助的。

<div class="tabs">
    <ul class="nav nav-tabs" data-bind="foreach: { data: settings.items }">
        <li data-bind="css: {active: isActive}">
            <a data-bind="text: name, click: $parent.toggle.bind($parent)"></a>
        </li>
    </ul>

    <div class="tab-content" data-bind="foreach: { data: settings.items}">
        <div class="tab-pane"  data-bind="html: content, css: {active: isActive}"></div>
    </div>
</div>

define(['durandal/composition', 'jquery'], function(composition, $) {

    var ctor = function() { };

    ctor.prototype.activate = function(settings) {
        this.settings = settings;
    };

    ctor.prototype.detached = function() {
        console.log('bootstrap/widget/viewmodel: detached', arguments, this);
    };

    ctor.prototype.toggle = function(model, event){
        this.deactivateAll();
        model.isActive(true);

    };

    ctor.prototype.deactivateAll = function(){

        $.each(this.settings.items(), function(idx, tab){
            tab.isActive(false);
        });
    };

    return ctor;
});

var system = require('durandal/system'),
    app = require('durandal/app'),
    viewLocator = require('durandal/viewLocator');
require('bootstrap');

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'
       }
    }
});