Multiple routes not working correctly in backbone.js

Question

I'm trying to create a basic webapp that displays images when a specific URL is reached. In this case, I'm using backbone.js's hash system.

I'm trying to make it so that when "www.website.com/index.html#1" is reached, the first image is displayed using some JavaScript that I have. I also need it so that if "www.website.com/index.html#1/#3/#5" is reached, the first, third, and fifth image is displayed. I know that I have to use multiple routes to do this, but I'm not sure how.

I have one working route for the first image that works awesomely. I just don't know how to adapt it so that it works with multiple routes.

Here's the working hash -

<script>
    $(function(){

    var hideOne = function () {
        //alert("hideOne");
        var elem = document.getElementById("one");
        elem.className = "hide";
    };

    var Workspace = Backbone.Router.extend({
      routes: {
        "test":"test",// #test
      },    
      test: hideOne
    });

    var router = new Workspace();
    Backbone.history.start(); 

});
</script> 

It's awesome, it works, it doesn't even refresh the page. But when I try to add another route to that, it all fails. Like, if I added a "test1":"test1" under the "test":"test" , the original "test":"test" won't work anymore(neither will the new one, of course).

I've even tried copying+pasting that entire block of code and trying to make a whole new route block of code. That doesn't work either. I'm really stumped here.

Any suggestions would be awesome.

Thanks

Answer 1

You should limit the scope of your first use case. Don't depend on external functions for now. Do something like

routes: {
        "test":function(){
            alert("test");
        },
        "test2":function(){
            alert("test2");
        }            
      },

Then change to

routes:  {
            "test":"test",
            "test2":"test2"
         },
         {
            test: function(){
              alert("test");
            },

            test2: function(){
              alert("test2");
            }
         }

Read more: http://mrbool.com/backbone-js-router/28001#ixzz3ANyS0hkR

Once you have that working, then start working on DOM manipulation.

Answer 2

routes: {
  "?*:queryString": 'showImages'
},

showImages: function(queryString) {
  console.log(queryString); // #1#3#5
}

You can use the route "?*:queryString" to match this URL "www.website.com/index.html#?#1#3#5". The functions "showImages" will be called and passing the value #1#3#5 in the queryString param.

Answer 3

So from other questions posted on StackOverflow, and some that I posted myself, some great users have helped me out and I've solved it.

Here's the code that I have to use -

<script>
  $(function(){
    var hideMany = function () {
      var toHide = [].slice.call(arguments);
      toHide.forEach(function (id) {
        if(id === null) { return }
        var elem = document.getElementById(id);
        if(elem) {
          elem.className = "hide";
        }
      });
    };

    var Workspace = Backbone.Router.extend({
      routes: {
        "hide(/:a)(/:b)(/:c)" : "test"
      },
      test: hideMany
    });

    var router = new Workspace();
    Backbone.history.start();

  });
</script>

So when you type "www.website.com/index.html#hide/ID1/ID2/ID3", it'll hide the elements with the IDs that you typed in.

I don't fully understand it, but I'm working on breaking it down and figuring out how it works. Thanks for all the help, guys!