First commit.

Default backbone example enhanced to leverage requirejs.
azicchetti · Jan 20, 2012 · 0b7e418 · 0b7e418
1 parent 2c7049d
commit 0b7e418
Show file tree

Hide file tree

Showing 16 changed files with 20,881 additions and 0 deletions.
diff --git a/examples/backbone-requirejs-example/README b/examples/backbone-requirejs-example/README
@@ -0,0 +1,24 @@
+This example shows a typical usage of parameters in the hash part of the url
+in order to render a detail page in jQuery Mobile.
+
+Backbone's hash router is replaced by jquerymobile-router.
+
+The example also shows the usage of regular expressions and Deferred
+objects in order to support straight links to the detail page.
+This is really useful if you're planning to use client-side rendering techinques
+in mobile websites.
+
+---------------------------------------------------------------------------------
+
+Esempio di rendering di un dettaglio tramite una pagina jQuery Mobile dedicata
+ed il passaggio di parametri nella parte hash dell'url.
+
+Come hash router è utilizzato il jquerymobile-router.
+
+In questo esempio è possibile vedere come è possibile utilizzare le regular expression
+nel router e come si impiegano i Deferred per garantire il funzionamento della pagina
+di dettaglio anche se richiamata con un link diretto (senza passare cioè dalla pagina
+principale dell'applicazione).
+Quest'ultimo fattore è di primaria importanza quando si costruiscono siti (non
+applicazioni!) mobile che fanno un uso estensivo del rendering client side.
+
diff --git a/examples/backbone-requirejs-example/index.html b/examples/backbone-requirejs-example/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>jQM-router example</title>
+		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+
+        <script data-main="js/main" src="js/libs/require-1.0.4.js" type="text/javascript"></script>
+
+	</head>
+<!-- Will be set to show in app.init() -->
+<body style="display: none">
+
+	<div id="index" data-role="page">
+
+		<div data-role="header">
+			<h1>jQM-router and backbone</h1>
+		</div>
+
+		<div data-role="content">
+			<a data-role="button" href="#detail?id=1">Detail 1</a>
+			<a data-role="button" href="#detail?id=2">Detail 2</a>
+			<a data-role="button" href="#detail?id=3">Detail 3</a>
+
+		</div>
+
+		<div data-role="footer" data-position="fixed">
+			<h4>Footer</h4>
+		</div>
+
+	</div>
+
+	<div id="detail" data-role="page" data-add-back-btn="true">
+
+		<div data-role="header">
+			<h1>Detail</h1>
+		</div>
+
+		<div data-role="content">
+		</div>
+
+		<div data-role="footer" data-position="fixed">
+			<h4>Footer</h4>
+		</div>
+
+	</div>
+
+   </body>
+</html>