Implement Sidr in Durandal

Question

I am trying to get the Sidr plugin to work in Durandal. Here's what I have

Main.js

requirejs.config({
paths: {
    'text': '../lib/require/text',
    'async': '../lib/require/async',
    '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',
    'sidr': '../lib/sidr/jquery.sidr.min',
    'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
    'bootstrap': {
        deps: ['jquery'],
        exports: 'jQuery'
    },
    'sidr': {
        deps: ['jquery']
    }

  }
});

Shell.js

define(['plugins/router', 'durandal/app', 'sidr'], function (router, app, sidr) {

return {
  router:router,
  activate:{...},
    compositionComplete: function (view, parent) {
            $('#simple-menu').sidr();

       return true;
    }
 }

Shell.html

<div data-bind="compose: { view: 'nav' }"></div>

<div id="wrap" class="container">
   <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">

            <div class="menuicon pull-left">
                <a id="simple-menu" href="">
                    <img alt="#" src="images/menu.png" /></a>
            </div>
     </div>
   </div>

nav.html

<nav>
...
</nav>

To summarise my problem simply...it doesn't work! When I click on the menu button nothing happens. What do I need to do differently?

Answer 1

I think that you need to name the nav element if it is the menu:

<nav id="sidr">
...
</nav>