ch11/spine/examples/history.html

<!DOCTYPE html>
<html>
<head> 
  <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="../spine.js" type="text/javascript" charset="utf-8"></script>
  <script src="../lib/spine.history.js" type="text/javascript" charset="utf-8"></script>
  
  <script type="text/javascript" charset="utf-8">
    var Users = Spine.Controller.create({
      init: function(){
        this.navigate("/users", 1);
      },
      
      active: function(number){
        console.log("active", number)
      }
    });
    
    // Add routes in App controller
    var App = Spine.Controller.create({
      init: function(){
        this.users = Users.init();
        this.routes({
          "/users/:number": function(num){
            this.users.active(num);
          },
          "/users/*glob": function(any){
            console.log('any', any);
          }
        });
      }
    }).init();
    
    // Add routes manually
    
    // Add a group of routes
    Spine.History.add({
      "/groups/:id": function(id){
        console.log('groups id', id)
      }
    });
    
    // More generic routes added last
    
    // Use your own regex
    Spine.History.add(/\/groups(\/)?/, function(){
      console.log('groups')
    });
    
    // Fire event on load
    Spine.History.change();
  </script>
</head>
<body>
  
</body>
</html>