SammyJS does not always fire route

Question

I am currently developing on a small SPA using sammyjs + knockoutjs.

I have an index.html that contains the routing mechanism and a div with id 'main'.

In my sample that I reduced to the issue there is a page 1 and page 2 that loads an html page using partial. The particular html page has knockout bindings.

The problem: When I switch between the pages using a link the routing does not always fire. When reloading the page with the appropriate link it fires and loads without problems.

I tried to put it into a JSBin:

http://jsbin.com/ufOroze/3/edit?html,js,console,output

When you click on the links they should actually load some content from a remote html file (p1.html and p2.html) -- although this does not work with JSBin. Anyway. You see the call, that is not always fired, and the link on the console.

I also put an example on my server under . There you also find a link to the zip-file containing the whole example: http://www.tomgrill.info/sammy_test/sammy_test.zip.

Anybody an idea? Do I misunderstand the concept of sammyjs oder is there a bug?

best, Tom

Answer 1

Why not harvest the power of knockout and let it render the #main div for you, now you mix knockout and jQuery.

I've made a light weight SPA bootstrapper for KO, here is a demo project

https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo

It takes handles the templates for you in convention over configuration way.

edit: Wiki that shows how to set it up on any backend

https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki

Basically you need to expose a REST service that returns the templates

Answer 2

Try this out :-

app = $.sammy('body', function (context) {
    this.get('#/', function () {
        console.log('Clicked');
        this.app.swap('sammy test');
    });
    this.get('#/:id', function () {
        console.log('Clicked');
        var id = this.params.id;
        ko.unapplyBindings($('#main'), false);
        this.partial('pages/' + id + '.html');
    });


});