Initial version of both the library and the demo app

techarch · Nov 24, 2011 · 02e2dbf · 02e2dbf
commit 02e2dbf
Show file tree

Hide file tree

Showing 10 changed files with 529 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+jQuery ViewLoader
+=================
+ViewLoader allows you to __break up__ a page into __multiple views__ using your template engine of choice (e.g. jQuery Template or jsView), each __loaded  and rendered dynamically__. When combined with KnockoutJS you can have each view be data-bound to a view model.
+
+Syntax
+---------
+
+    $(document).viewloader({
+        logLevel: "debug",
+
+       afterEachTemplate: function (templateId) { 
+          // code to execute after each view has been successfully loaded
+       },
+
+       success: function (successfulResolution) {
+          // Code to execute once all views have been loaded for the page
+       },
+
+       error: function (failedResolution) {
+          // Code to execute if an error occurs while loading the views 
+       
+    });
+
+Demo
+--------
+See the __demo__ folder for a complete example. The demo consists of:
+
+  1. An __index.html__ containing 2 views, each view has a subview
+  2. Four separate view files (with the __.view.html__ extension)
+  3. An __application.js__ with an __InitializeApplication__ function initializing the ViewLoader
+
+(c) 2011 Philippe Monnet (@techarch) [http://blog.monnet-usa.com/](http://blog.monnet-usa.com/ "The Tech. Arch.")
diff --git a/demo/css/application.css b/demo/css/application.css
@@ -0,0 +1,56 @@
+body { 
+	font-family: "Verdana", sans-serif;
+	font-size: 8pt;
+}
+.demoHeaders { margin-top: 2em; }
+#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
+#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
+ul#icons {margin: 0; padding: 0;}
+ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
+ul#icons span.ui-icon {float: left; margin: 0 4px;}
+
+header, footer, nav, section, article { display: block; }
+
+section
+{
+	border: 1px solid blue;
+	border-radius: 4px 4px 4px 4px;
+	padding: 10px;
+}
+
+section label
+{
+
+}
+
+fieldset 
+{
+	margin:4px 0;
+	width: 250px;
+}
+
+fieldset legend
+{
+	font-weight: bold;
+	width: auto;
+}
+
+/* --- main1-view  --- begin --------------------------*/
+
+/* --- main1-view  --- end ----------------------------*/
+
+
+/* --- main2-view --- begin -----------------*/
+
+/* --- main2-view --- end -------------------*/
+
+
+/* --- sub1-view --- begin -----------------*/
+
+/* --- sub1-view --- end -------------------*/
+
+
+/* --- sub2-view --- begin -----------------*/
+
+/* --- sub2-view --- end -------------------*/
+
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+		<title>jQuery-viewloader Demo</title>
+
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script>
+		<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript" ></script>
+		<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js" type="text/javascript" ></script>
+		<script src="http://github.com/techarch/jquery-viewloader/jquery.viewloader.js" type="text/javascript" ></script>		
+
+		<script src="scripts/application.js" type="text/javascript" ></script>		
+		<link href="css/application.css" rel="stylesheet" type="text/css"  />	
+	</head>
+
+	<body>
+		<script id="index-main1-view-template" type="text/html" src="view/index/_index.main1.view.html" ></script>
+		<div id="index-main1-view-container" data-bind="template: { name: 'index-main1-view-template' }" ></div>		
+
+		<script id="index-main2-view-template" type="text/html" src="view/index/_index.main2.view.html" ></script>
+		<div id="index-main2-view-container" data-bind="template: { name: 'index-main2-view-template' }" ></div>		
+
+		<script type="text/javascript" >
+			 $(document).ready(function () {
+				InitializeApplication();
+			});					
+		</script>
+	</body>
+</html>
diff --git a/demo/scripts/application.js b/demo/scripts/application.js
@@ -0,0 +1,48 @@
+if (typeof(console) != 'undefined' && console) console.info("Application loading!");
+
+function InitializeApplication() {
+	if (typeof(console) != 'undefined' && console) 
+		console.info("InitializeApplication starting ...");
+
+		// Initialize our KnockoutJS view model
+		var nowDate = new Date();
+		var viewModel = {  
+										today: ko.observable(nowDate.toLocaleDateString()),
+										timeZoneOffset: ko.observable(nowDate.getTimezoneOffset() / 60 * -1),
+										now: ko.observable(nowDate.toLocaleTimeString()),
+										language: ko.observable(navigator.language)
+									}
+
+		// Configure the view loader
+		$(document).viewloader({
+			logLevel: "debug",
+
+			afterEachTemplate: function (templateId) { 
+				if (typeof(console) != 'undefined' && console) {
+					console.info("View template " + templateId + " is loaded");  
+				}
+			},
+
+			success: 	function (successfulResolution) {
+							// Once the source for all views has been loaded
+							// we can now bind our KnockoutJS view model to the DOM.
+							ko.applyBindings(viewModel);
+
+							if (typeof(console) != 'undefined' && console) {
+								console.info("index.html page is fully loaded and initialized");	
+							}
+						},
+
+			error:		function (failedResolution) {
+							// Loading failed somehow
+							if (typeof(console) != 'undefined' && console) {
+								console.error("index.html page failed to load");	
+							}
+						}
+		});
+
+	if (typeof(console) != 'undefined' && console) 
+		console.info("InitializeApplication done");		
+}
+
+if (typeof(console) != 'undefined' && console) console.info("Application loaded!");
diff --git a/demo/view/index/_index.main1.view.html b/demo/view/index/_index.main1.view.html
@@ -0,0 +1,9 @@
+<fieldset id="index-main1-view">
+	<legend>Main1</legend>
+	<span>Today is ${today}</span>
+
+	<script id="sub1-view-template" type="text/html" src="view/shared/_sub1.view.html" ></script>
+	<div id="sub1-view-container" data-bind="template: { name: 'sub1-view-template' }" ></div>				
+</fieldset>
+
+
diff --git a/demo/view/index/_index.main2.view.html b/demo/view/index/_index.main2.view.html
@@ -0,0 +1,9 @@
+<fieldset id="index-main2-view">
+	<legend>Main2</legend>
+	<span>Now is ${now}</span>
+
+	<script id="sub2-view-template" type="text/html" src="view/shared/_sub2.view.html" ></script>
+	<div id="sub2-view-container" data-bind="template: { name: 'sub2-view-template' }" ></div>					
+</fieldset>
+
+
diff --git a/demo/view/shared/_sub1.view.html b/demo/view/shared/_sub1.view.html
@@ -0,0 +1,7 @@
+<fieldset id="sub1-view">
+	<legend>Sub1</legend>
+	<span>The current language is ${language}</span>
+
+</fieldset>
+
+
diff --git a/demo/view/shared/_sub2.view.html b/demo/view/shared/_sub2.view.html
@@ -0,0 +1,7 @@
+<fieldset id="sub2-view">
+	<legend>Sub2</legend>
+	<span>The timezone offset is ${timeZoneOffset}</span>
+
+</fieldset>
+
+
diff --git a/jquery.viewloader-0.1.min.js b/jquery.viewloader-0.1.min.js