Bootstrap Dropdown Lists in Durandal 2.0

Question

I am trying to connect some boot bootstrap boot in a durandal 2.0 application:

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

When you click the drop-down list, the Durandal router tries to go to the root route ("#" or ""). And the menu never opens. It's right? Workarounds?

Update

Tabs have the same problem:

 <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

The problem was pretty simple. There was no conflict with the routing module. I assumed that javascript bootstrap was enabled by default in the starter kit, but that is not the case.

Fixing is as simple as adding an extra line to my dependent queries:

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

Please note that my 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

Probably the best option in the long run is to convert these bootstrap widgets into custom knockout bindings (e.g. https://github.com/billpull/knockout-bootstrap ) or even better into Durandal widgets.

See how MessageBox Durandal 1.2 is implemented. This can be used as a rough guide for converting bootstrap tabs and drop-down lists to Durandal widgets. As you can see, the href attributes in the view have been replaced with data-bind="click: ..." . In addition, you will have to convert the JavaScript Bootstrap to a Durandal viewmodel .

eg. http://twitter.imtqy.com/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> 

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

Update: The minimal implementation of the tab widget is performed here. Live version at http://dfiddle.imtqy.com/dFiddle-2.0/#bootstrap

View:

 <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

Have you tried changing the containing element to a div or span instead of an anchor tag?