devdays/spa-sammyWithTemplates.html

## spa-sammyWithTemplates.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#/">Home</a></li>
            <li><a href="#/products">Products</a></li>
            <li><a href="#/products/1">Product 1</a></li>
            <li><a href="#/data">Data</a></li>
        </ul>
    </nav>
    <div id='content'></div>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/mustache.js"></script>
    <script src="Scripts/sammy-0.7.4.js"></script>
    <script src="Scripts/sammy.mustache.js"></script>
    <script>

        // ====== set up require.js here in a later step ======

        (function () {
            "use strict";

            // this line changes to
            // var app = sammy('#content', function () {
            // without the reference to jQuery when we use requireJS
            var app = $.sammy('#content', function () {

                // first param is a function name
                this.use('Mustache', 'html');

                // the callback is the entire route wrapped in a closure
                this.around(function (callback) {
                    var context = this;
                    this.load('data/products.txt', { json: true })
                        .then(function (items) {
                            context.items = items;
                        })
                        .then(callback);
                });

                this.get('#/', function (context) {
                    context.app.swap(''); // clear the content area before loading the partials
                    context.$element().append('<h1>Main page</h1>');
                });

                this.get('#/data', function (context) {
                    context.app.swap(''); // clear the content area before loading the partials
                    context.$element().append(JSON.stringify(context.items));
                });

                this.get('#/products/:id', function (context) {
                    // render product here
                });

                this.get('#/products', function (context) {
                    // render products here
                });

            });

            $(function () {
                app.run('#/');
            });

        })();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	</head>
	<body>
	<nav>
	<ul>
	<li><a href="#/">Home</a></li>
	<li><a href="#/products">Products</a></li>
	<li><a href="#/products/1">Product 1</a></li>
	<li><a href="#/data">Data</a></li>
	</ul>
	</nav>
	<div id='content'></div>
	<script src="Scripts/jquery-1.9.1.js"></script>
	<script src="Scripts/mustache.js"></script>
	<script src="Scripts/sammy-0.7.4.js"></script>
	<script src="Scripts/sammy.mustache.js"></script>
	<script>

	// ====== set up require.js here in a later step ======

	(function () {
	"use strict";

	// this line changes to
	// var app = sammy('#content', function () {
	// without the reference to jQuery when we use requireJS
	var app = $.sammy('#content', function () {

	// first param is a function name
	this.use('Mustache', 'html');

	// the callback is the entire route wrapped in a closure
	this.around(function (callback) {
	var context = this;
	this.load('data/products.txt', { json: true })
	.then(function (items) {
	context.items = items;
	})
	.then(callback);
	});

	this.get('#/', function (context) {
	context.app.swap(''); // clear the content area before loading the partials
	context.$element().append('<h1>Main page</h1>');
	});

	this.get('#/data', function (context) {
	context.app.swap(''); // clear the content area before loading the partials
	context.$element().append(JSON.stringify(context.items));
	});

	this.get('#/products/:id', function (context) {
	// render product here
	});

	this.get('#/products', function (context) {
	// render products here
	});

	});

	$(function () {
	app.run('#/');
	});

	})();
	</script>
	</body>
	</html>