Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Single Page App - Sammy with Templates
<!DOCTYPE html>
<html xmlns="">
<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>
<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>
// ====== 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;
this.get('#/', function (context) {''); // clear the content area before loading the partials
context.$element().append('<h1>Main page</h1>');
this.get('#/data', function (context) {''); // clear the content area before loading the partials
this.get('#/products/:id', function (context) {
// render product here
this.get('#/products', function (context) {
// render products here
$(function () {'#/');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment