sammy.js

    <script>
        /// Sammy.js
        /// SPA

        /// routing (dinamic change of some content not page)
        //'domain.com#/' - root
        // bind function to url


        // use browser history api (user experience back prev btns ...)

        var app = $.sammy('#main-content', function () {

            //routing (method, url , callback)
            this.get('#/', function () { });

            this.get('#/about', function () { });

            this.get('#/item/:id', function (id) { }); // this.params['id'] <- object with all params
            //main method (entry point)
        });
        app.run('#/');

        ///
    </script>
    <script>
        (function () {
            require.config({
                paths: {
                    jquery: "libs/jquery-2.0.3",
                    mustache: "libs/mustache",
                    sammy: "libs/sammy-0.7.4",
                    rsvp: "libs/rsvp.min",
                    "http-requester": "libs/http-requester"
                }
            })

            require(["jquery", "sammy", "mustache", "rsvp", "http-requester"],
                            function ($, sammy, mustache, rsvp, request) {
                                var app = sammy("#main-content", function () {
                                    this.get("#/", function () {
                                        $("#main-content").html("View the students page");
                                    });

                                    this.get("#/about", function () {
                                        $("#main-content").html("View the students page");
                                    });

                                    this.get("#/students", function () {
                                        request.getJSON("api/students")
                                            .then(function (data) {
                                                var studentsList = $("<ul />").addClass("students-list");
                                                var templateString = $("#student-template").html();
                                                var template = mustache.compile(templateString);
                                                for (var i in data) {
                                                    var student = data[i];
                                                    var templatedStudent = template(student);
                                                    var studentItem =
                                                        $("<li />")
                                                            .addClass("student-item")
                                                                .html(templatedStudent);
                                                    studentsList.append(studentItem);
                                                }
                                                $("#main-content").html(studentsList);
                                            });
                                    });

                                    this.get("#/student/:id", function () {
                                        request.getJSON("api/students/" + this.params["id"] + "/marks")
                                            .then(function (marks) {
                                                var marksList = $('<ul/>').addClass("marks-list");
                                                var templateString = $("#mark-template").html();
                                                var template = mustache.compile(templateString);
                                                for (var i in marks) {
                                                    var mark = marks[i];
                                                    var templatedMark = template(mark);
                                                    //marksList.append(templatedMark);
                                                    var markItem =
                                                        $("<li />")
                                                            .addClass("mark-item")
                                                                .html(templatedMark);
                                                    marksList.append(markItem);
                                                }
                                                $("#main-content").html(marksList);
                                            });
                                    });


                                });

                                app.run("#/");

                                $("header").on("click", "nav ul li", function () {
                                    $(this).siblings().removeClass("selected");
                                    $(this).addClass("selected");
                                });
                            });
        }());
    </script>
    <nav>
                <ul>
                    <li class="selected">
                        <a href="#/">Home</a>
                    </li>
                    <li>
                        <a href="#/students">Students</a>
                    </li>
                    <li>
                        <a href="#/about">About</a>
                    </li>
                </ul>
            </nav>
        </header>
        <div id="main-content">
        </div>

        <script id="student-template" type="x-mustache-template">
            <a href="#/student/{{id}}">{{name}}</a>
        </script>

        <script id="mark-template" type="x-mustache-template">
            <p>
                {{subject}}: {{score}}
            </p>
        </script>