Question

i’m looking around for javascript routing libraries and i come to Sammy, so i’m learning it.

All examples that i’ve seen so far show hot to proceed routing based from a domain as a base url, like http://www.mydomain.com/# and then all routes goes on

but i’m doing some trials within a nested dir within my localhost dir, say /wwwroot/play/sammy/ so my base url would be

http://localhost/~rockdeveloper/play/sammy/# 

and then all routes must go on, like:

http://localhost/~rockdeveloper/play/sammy/#/products
http://localhost/~rockdeveloper/play/sammy/#/clients
http://localhost/~rockdeveloper/play/sammy/#/search

is there any way to set this base url so i can proceed to config sammy routes like this ?

get('#/products')
get('#/clients')
get('#/search')

by now i have to concatenate the main string to the route, and i wish it would be more smart than this…

baseurl='/~rockdeveloper/play/sammy/#/search';
get(baseurl + '#/products');

thanks.

Answer 1

Sammy is a frontend framework, you don’t need to provide a baseurl, since all calls are made at clientside on the base of url, the rest of the path after the pound sign are there just for sammy use.

Ex:

http://localhost/~rockdeveloper/play/sammy/#/products
http://localhost/~rockdeveloper/play/sammy/#/products/iphone
http://localhost/~rockdeveloper/play/sammy/#/products/iphone/cases/all

Your base path IS

http://localhost/~rockdeveloper/play/sammy/

In all of them. The rest are just sammy routes, (think of them as GET params)

Also your routes must be defined in a way that can be called seamlessly from your anchors. Here is a portion of my routes file:

---

app = $.sammy('body', function() {
    //define events
    this.bind('addNew',function(e,data){
        //data.name = data.name.split(' ').join('_');
        for(x in mapa[data.element]){
        if(mapa[data.element][x].name.toLowerCase() == data.name.toLowerCase()){
                return alert('There is already an element with the same name');
            break;
        }
    }
    ap('Adding: '+data.element+' with the name: '+data.name);
    mapa[data.element].push({name:data.name});
    this.trigger('sections',{action:data.element});
    });


  // define routes
  this.get('#/', function() {
    $('#menuright').html('');
    $('.customMenu').remove();
    $('#holder').html('').attr({style:''});
  });

    this.get('#/someroute/:variable', function() {
        /*
        ...
        ...
        ...
        */
    });

  this.before(function(){
    if(typeof(app.historial)=='undefined'){
        app.historial = [];
    }
    app.historial.unshift(this.path.split('#')[1]);
    if(app.historial.length>2) app.historial.length = 2;
    do_something();
  });
});

---

And from your views you can just simply use something like:

<a href="#/someroute/{{name}}"><i class="icon-bookmark"></i> {{name}}</a>
//le me here using mustache :{