Question

I don’t have enough experience with javascript and jQuery development so I was wondering if someone could tell me how to create a function that uses sammy.js and HTML templating.

This is the working code I have right now:

<script>
    ;(function($) {

      var app = $.sammy(function() {

        this.get('#/', function() { $('#content').text(''); });

        this.get('#/home', function() { $('#content').load('main.html'); });

      });

      $(function() { app.run() });

    })(jQuery);

</script>

This code puts the main.html‘s content when I go to or click on ...html#/home but I am looking for a javascript function that just figures out the end point of the URL (the word after ..#/ ) and gets the html page of that same name.

In pseudo-code:

if( somethingWasClicked and uses sammy.js )
  loadContent();

function loadContent() {
    endpoint = figureOutEndPoint();
    $('#content').load(endpoint.html);
} 

Thanks for the help

Answer 1

You just need a route with a parameter in it:

this.get('#/:page', function() { 
    $('#content').load(this.params['page'] + '.html');
});

Make sure that’s after your other routes or it will get called for almost everything (such as #/home which you’re already handling).

You can, of course, put other parameters in the routes:

this.get('#/:where/:is/:pancakes/:house', function() {
    // Do things with this.params['where'], this.params['is'],
    // this.params['pancakes'], and this.params['house'].
});

You just need to make sure you get the order right or the routes can fight each other. Routes are matched in the same order that they’re added in so the more general catch-all routes usually go at the bottom.