Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (106 sloc) 4.34 KB
<!DOCTYPE html>
<html>
<head>
<title>Sammy+Mustache+RequireJS</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/require.js"></script>
<script>
// ====== set up require.js ================
(function () {
"use strict";
require.config({
baseUrl: 'Scripts',
paths: {
//"underscore": "lodash",
"jquery": "jquery-1.9.1",
//"q": "q",
"sammy": "sammy-0.7.4",
"mustache": "mustache",
"mustachePlugin" : "sammy.mustache"
},
//priority: ['jquery', 'sammy'],
//Remember: only use shim config for non-AMD scripts,
//scripts that do not already call define(). The shim
//config will not work correctly if used on AMD scripts,
//in particular, the exports and init config will not
//be triggered, and the deps config will be confusing
//for those cases.
shim: {
/* "amplify": {
//These script dependencies should be loaded before loading
//jquery.js
deps: ["jquery"],
//Once loaded, use the global 'amplify' as the
//module value.
exports: "amplify"
}, */
// we get an error that "jQuery is not defined" error without this
// shim for sammy
"sammy": {
deps: ["jquery"],
exports: "sammy"
}
}
//enforceDefine : true
//map: {
// '*': { 'underscore': 'lodash' }
//}
});
})();
require(['sammy', 'mustachePlugin'], function (sammy) {
"use strict";
console.log("initializing sammy");
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/3-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) {
var param = context.params['id'];
var products = context.items.products;
if (!products[param]) {
return context.notFound();
}
// partial() internally calls render and swap
// creates the html and puts it into $element
context.partial('Templates/productDetail.html', products[param]);
});
this.get('#/products', function (context) {
var products = context.items;
context.app.swap(''); // clear out the $element in this case '#content'
context.render('templates/productsList.html', products)
.appendTo(context.$element());
});
});
$(function () {
app.run('#/');
});
})();
</script>
</body>
</html>
You can’t perform that action at this time.