Question

My problem is that when I use a hash tag in a link, it just attaches the hash to the url rather than going to the route. For example /ToDo/public/offline2.html#test. If I leave the tag = "" it does go to the router for some reason.

I have turned off the jquery mobile router with following code

<script type="text/javascript">     
  $(document).bind("mobileinit", function () {  
      $.mobile.ajaxEnabled = false;         
      $.mobile.linkBindingEnabled = false;  
      $.mobile.hashListeningEnabled = false;    
      $.mobile.pushStateEnabled = false;        
      $.mobile.changePage.defaults.changeHash = false;
  });

</script>

<script src="../js/jquery.mobile.js"></script>
<script src="../js/jquery.js"></script>

How my html code is very basic

<p>go to <a href="#test"  id="#test">test page</a></p>

So I have a separate js file containing the javascript code in say file test.js. this is the main code

$(app.init)

app.init = function() {
  console.log('start init')

  router = new TestRouter();    
  console.log('end init')
}


var TestRouter = Backbone.Router.extend({           
    routes:{       
        "":"home",  
        "test":"test" 
       },   

          initialize: function(){     var self = this
              _.bindAll(self)       },  
          home: function(){         
              alert(name);  
             // $.mobile.changePage($('#home-page'), {changeHash:false});   
              },        

              test: function (name) {   
                  alert(name);          
                //  $.mobile.changePage($('#test-page'), {changeHash:false});   
                  }     
              })    

As I said the code works for the home, when I set the tag like this

<a href="" data-icon="home">Home</a>

Answer 1

You need to invoke Backbone.history.start() before Backbone will start monitoring for hashchange events.

app.init = function() {
  console.log('start init')

  router = new TestRouter();
  Backbone.history.start();
  console.log('end init')
}