Question

我正在尝试在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>

Answer 1

问题其实很简单。与路由模块没有冲突。我假设默认情况下在入门工具包中包含了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'
       }
    }
});

Answer 2

从长远来看，最好的选择可能是将这些引导小部件转换为淘汰自定义绑定（例如https://github.com/billpull/knockout-bootstrap），甚至更好地转换为本机Durandal小部件。

查看Durandal 1.2 messageBox的实现方式。这可以作为将引导标签和下拉列表转换为Durandal小部件的粗略准则。如您所见，视图中的href属性已被data-bind="click: ..."取代。此外，您必须将Bootstrap JavaScript转换为Durandal viewmodel。

e.g。 http://twitter.github.io/bootstrap/javascript.html#modals

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

变得
https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/durandal/messageBox.html

<div class="messageBox">
    <div class="modal-header">
        <h3 data-bind="html: title"></h3>
    </div>
    <div class="modal-body">
        <p class="message" data-bind="html: message"></p>
    </div>
    <div class="modal-footer" data-bind="foreach: options">
        <button class="btn" data-bind="click: function () { $parent.selectOption($data); }, html: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }"></button>
    </div>
</div>

更新：这是一个简约的标签小部件实现。 http://dfiddle.github.io/dFiddle-2.0/#bootstrap

的实时版本

查看：

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

viewmodel：

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

Answer 3

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

Durandal 2.0中的Bootstrap下拉列表

更新

3 个答案: