chrislkeller · February 3, 2022 08:02 · Jun 14, 2013 · Feb 3, 2013 · Feb 3, 2013 · Feb 3, 2013
diff --git a/README.md b/README.md
@@ -1,71 +1,3 @@
-# Handlebars.js template file rendered with AJAX
+### Demo: ajax-handlebars
 
-Here's a simple script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
-
-## Overview
-
-[Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...
-
-	<div class="entry">
-		<h1>{{title}}</h1>
-		<div class="body">
-			{{body}}
-		</div>
-	</div>
-
-… where {{title}} and {{body}} represents information stored in an object like this:
-
-	var context = {title: "My New Post", body: "This is my first post!"}
-
-There are some really good resources out there for those who want to start using the Handlebars JavaScript template library. Here are some links:
-
-- [Handlebars site](http://handlebarsjs.com/)
-- [Handlebars GitHubRepo](https://github.com/wycats/handlebars.js/)
-- [NetTuts Handlebars Walkthrough](http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/)
-- Three-part series on using Handlebars: [Part one](http://blog.teamtreehouse.com/getting-started-with-handlebars-js); [Part two](http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/); [Part three](http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks)
-
-I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
-
-## Usage
-
-Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
-
-Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that.
-
-	// render handlebars templates via ajax
-	function getTemplateAjax(path, callback) {
-	    var source, template;
-	    jqueryNoConflict.ajax({
-	        url: path,
-	        success: function (data) {
-	            source = data;
-	            template = Handlebars.compile(source);
-	            if (callback) callback(template);
-	        }
-	    });
-	}
-
-I then abstract out a function to display the compiled template, passing in the name of the template, the css selector I am targeting and the data I want to display.
-
-        // function to compile handlebars template
-        function renderHandlebarsTemplate(withTemplate,inElement,withData){
-            getTemplateAjax(withTemplate, function(template) {
-                jqueryNoConflict(inElement).html(template(withData));
-            })
-        };
-
-I can then call it like this, where dataDetailsTemplate.handlebars is the name of my template, and #data-details is the css selector I am targeting, and data is what I want to display.
-
-        renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
-
-## Links & Resources
-
-- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
-- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
-- [Repo](https://gist.github.com/3230081)
-
-----
-
-## License
-
-[The MIT License](http://opensource.org/licenses/MIT)
+This repo's location has [changed](https://github.com/chrislkeller/projects.chrislkeller.com/tree/master/demos/ajax-handlebars).
diff --git a/index.html b/index.html
@@ -20,4 +20,18 @@
 </body>
 
 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
-<script type="text/javascript" src="data-script.js"></script>
+<script type="text/javascript" src="data-script.js"></script>
+
+    <!-- begin analytics -->
+    <script type="text/javascript">
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-20502211-1']);
+        _gaq.push(['_trackPageview']);
+
+        (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+        })();
+    </script>
+    <!-- end analytics -->
diff --git a/README.md b/README.md
@@ -60,8 +60,9 @@ I can then call it like this, where dataDetailsTemplate.handlebars is the name o
 
 ## Links & Resources
 
-- [Blog Post](http://www.chrislkeller.com/some-thoughts-after-a-couple-months-with-tabl)
-- [Repo](https://gist.github.com/4700210)
+- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
+- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+- [Repo](https://gist.github.com/3230081)
 
 ----
 

diff --git a/blog_post.md b/blog_post.md
@@ -2,9 +2,9 @@
 
 >**tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
 >
+>- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
 >- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
 >- [Repo](https://gist.github.com/3230081)
-
 ----
 
 ## Overview

diff --git a/blog_post.md b/blog_post.md
@@ -3,8 +3,8 @@
 >**tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
 >
 >- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
->- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
 >- [Repo](https://gist.github.com/3230081)
+
 ----
 
 ## Overview

diff --git a/blog_post.md b/blog_post.md
@@ -0,0 +1,197 @@
+# Handlebars.js template file rendered with AJAX
+
+>**tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
+>
+>- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+>- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
+>- [Repo](https://gist.github.com/3230081)
+----
+
+## Overview
+
+[Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...
+
+	<div class="entry">
+		<h1>{{title}}</h1>
+		<div class="body">
+			{{body}}
+		</div>
+	</div>
+
+… where {{title}} and {{body}} represents information stored in an object like this:
+
+	var context = {title: "My New Post", body: "This is my first post!"}
+
+There are some really good resources out there for those who want to start using the Handlebars JavaScript template library. Here are some links:
+
+- [Handlebars site](http://handlebarsjs.com/)
+- [Handlebars GitHubRepo](https://github.com/wycats/handlebars.js/)
+- [NetTuts Handlebars Walkthrough](http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/)
+- Three-part series on using Handlebars: [Part one](http://blog.teamtreehouse.com/getting-started-with-handlebars-js); [Part two](http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/); [Part three](http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks)
+
+I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
+
+## Walkthrough
+
+Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
+
+Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that.
+
+	// render handlebars templates via ajax
+	function getTemplateAjax(path, callback) {
+	    var source, template;
+	    jqueryNoConflict.ajax({
+	        url: path,
+	        success: function (data) {
+	            source = data;
+	            template = Handlebars.compile(source);
+	            if (callback) callback(template);
+	        }
+	    });
+	}
+
+
+I then abstract out a function to display the compiled template, passing in the name of the template, the css selector I am targeting and the data I want to display.
+
+        // function to compile handlebars template
+        function renderHandlebarsTemplate(withTemplate,inElement,withData){
+            getTemplateAjax(withTemplate, function(template) {
+                jqueryNoConflict(inElement).html(template(withData));
+            })
+        };
+
+I can then call it like this, where dataDetailsTemplate.handlebars is the name of my template, and #data-details is the css selector I am targeting, and data is what I want to display.
+
+        renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
+
+Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months.
+
+I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors.
+
+In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:
+
+		var jqueryNoConflict = jQuery;
+
+When the DOM is ready I call the *retriveData()* function which kind of starts the whole ball rolling:
+
+		//begin main function
+		jqueryNoConflict(document).ready(function(){
+		    retriveData();
+		});
+		//end main function
+
+*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my Handlebars template to the page with data in it.
+
+		// grab data
+		function retriveData() {
+		    var dataSource = 'working-data-file.json';
+		    jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
+		};
+
+*renderDataVisualsTemplate()* gets an argument that represents my the data from my flat JSON file. This function runs my base handlebars template function using the name of my template (dataDetailsTemplate.handlebars), the css selector where I will inject my template (#data-details) and the data I will fill it with (data).
+
+		// render compiled handlebars template
+		function renderDataVisualsTemplate(data){
+		    handlebarsDebugHelper();
+		    renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
+		};
+
+After that, I have my function to pull my Handlebars template from an external file and compile it. I've also included a Handlebars debugger, a "helper" function shows information about the data I am trying to work with.
+
+The base handlebars template function looks like this, and takes three parameters: the name of the template, the css selector and the data object:
+
+		// function to compile handlebars template
+		function renderHandlebarsTemplate(withTemplate,inElement,withData){
+		    getTemplateAjax(withTemplate, function(template) {
+		        jqueryNoConflict(inElement).html(template(withData));
+		    })
+		};
+
+Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the Handlebars walkthrough.
+
+		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]}
+
+To render the data, the Handlebars template is structured just as it would be if it was inline on the index.html page, save for wrapping it in a script tag.
+
+		<div>
+		    {{debug}}
+		    <h2>Flat file data displayed on a handlebars.js template loaded with ajax</h2>
+		    {{#objects}}
+		        <p>{{Title}}: <strong>{{Data}}</strong><br />
+		        -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
+		    {{/objects}}
+		</div>
+
+In this case, I'm asking that every instance of an object
+
+		{{#objects}}
+
+		{{/objects}}
+
+be rendered to the page and structured in a certain way.
+
+        <p>{{Title}}: <strong>{{Data}}</strong><br />
+        -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
+
+My HTML page isn't any special, other than have a div that will have all kinds of data injected into it thanks to Handlebars.
+
+	<div id="data-details"></div>
+
+### Practical Applications?
+
+Your mileage might vary, but I've found several practical applications of Handlebars.js just by looking at my needs.
+
+For instance, I came from shops that used a CMS where I could add html, css and JavaScript to a CMS "asset" which was then wrapped by the site header, rail and footer. Here at [SCPR](http://www.scpr.org/), I've been lucky enough to have mentors who wanted to and helped to create something similar.
+
+[This project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom structure that lies outside of the CMS. The header and footer are each Handlebars templates, external files that I add to each new project. If I need to change a link in the footer I change it in one place and it's changed on all project pages using the template. Same goes for the header.
+
+You could easily recreate something similar. Let's say your template structure is something like:
+
+		<body>
+		    <div id="data-header"></div>
+		        <div id="data-container">
+		            <div class="row-fluid">
+		                <div class="span4">
+		                    <div id="data-details"></div>
+		                </div>
+		                <div class="span8">
+		                    <div id="data-visuals"></div>
+		                </div>
+		            </div>
+		        </div>
+		    <div id="data-footer"></div>
+		</body>
+
+You can probably spot some candidates for possible Handlebars templates now; data-header, data-details, data-visuals and data footer all make sense, where data-header and data-footer could be used on all projects.
+
+Or say you want to quickly create a table to display some information. Using the data file from my earlier example, I can create a Handlebars template to do just that:
+
+		<table class="table">
+		    <tbody>
+		        <tr>
+		            {{#objects}}
+		                <td>{{Title}}</td>
+		                <td>{{Data}}</td>
+		                <td>{{Source}}</td>
+		            {{/objects}}
+		        </tr>
+		    </tbody>
+		</table>
+
+## Wrap up
+
+As an intermediate beginner to the world of web development, and entering my fifth year of being an "online guy" in a newsroom, I've found Handlebars to be a lot of fun. To increase that fun, there are all kinds of add ons and helper functions that you can use. [swag.js](http://elving.github.com/swag/) might be the most fun thus far.
+
+See while Handlebars tried to keep logic out of the templates -- and I respect that -- there some things I'd like to be able to do, and swag.js allows for some of that. For instance, if in my table example I wanted the title to be in all-caps I can do this with swag:
+
+		{{uppercase Title}}
+
+Or if I want to evaluate the data in my flat JSON file, I can run comparisons on my Handlebars templates.
+
+		{{#objects}}
+		    {{#is Source 'National Employment Law Project'}}
+		        <td>The Source is {{Source}}</td>
+		    {{else}}
+		        <td>No Source</td>
+		    {{/is}}
+		{{/objects}}
diff --git a/README.md b/README.md
@@ -1,12 +1,6 @@
 # Handlebars.js template file rendered with AJAX
 
-**tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
-
-- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
-- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
-- [Repo](https://gist.github.com/3230081)
-
-----
+Here's a simple script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
 
 ## Overview
 
@@ -32,7 +26,7 @@ There are some really good resources out there for those who want to start using
 
 I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
 
-## Walkthrough
+## Usage
 
 Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
 
@@ -51,7 +45,6 @@ Thankfully this function based on [code from here](http://berzniz.com/post/24743
 	    });
 	}
 
-
 I then abstract out a function to display the compiled template, passing in the name of the template, the css selector I am targeting and the data I want to display.
 
         // function to compile handlebars template
@@ -65,134 +58,13 @@ I can then call it like this, where dataDetailsTemplate.handlebars is the name o
 
         renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
 
-Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months.
-
-I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors.
-
-In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:
-
-		var jqueryNoConflict = jQuery;
-
-When the DOM is ready I call the *retriveData()* function which kind of starts the whole ball rolling:
-
-		//begin main function
-		jqueryNoConflict(document).ready(function(){
-		    retriveData();
-		});
-		//end main function
-
-*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my Handlebars template to the page with data in it.
-
-		// grab data
-		function retriveData() {
-		    var dataSource = 'working-data-file.json';
-		    jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
-		};
-
-*renderDataVisualsTemplate()* gets an argument that represents my the data from my flat JSON file. This function runs my base handlebars template function using the name of my template (dataDetailsTemplate.handlebars), the css selector where I will inject my template (#data-details) and the data I will fill it with (data).
-
-		// render compiled handlebars template
-		function renderDataVisualsTemplate(data){
-		    handlebarsDebugHelper();
-		    renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
-		};
-
-After that, I have my function to pull my Handlebars template from an external file and compile it. I've also included a Handlebars debugger, a "helper" function shows information about the data I am trying to work with.
-
-The base handlebars template function looks like this, and takes three parameters: the name of the template, the css selector and the data object:
-
-		// function to compile handlebars template
-		function renderHandlebarsTemplate(withTemplate,inElement,withData){
-		    getTemplateAjax(withTemplate, function(template) {
-		        jqueryNoConflict(inElement).html(template(withData));
-		    })
-		};
-
-Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the Handlebars walkthrough.
-
-		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]}
-
-To render the data, the Handlebars template is structured just as it would be if it was inline on the index.html page, save for wrapping it in a script tag.
-
-		<div>
-		    {{debug}}
-		    <h2>Flat file data displayed on a handlebars.js template loaded with ajax</h2>
-		    {{#objects}}
-		        <p>{{Title}}: <strong>{{Data}}</strong><br />
-		        -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
-		    {{/objects}}
-		</div>
-
-In this case, I'm asking that every instance of an object
-
-		{{#objects}}
-
-		{{/objects}}
-
-be rendered to the page and structured in a certain way.
-
-        <p>{{Title}}: <strong>{{Data}}</strong><br />
-        -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
-
-My HTML page isn't any special, other than have a div that will have all kinds of data injected into it thanks to Handlebars.
-
-	<div id="data-details"></div>
-
-### Practical Applications?
-
-Your mileage might vary, but I've found several practical applications of Handlebars.js just by looking at my needs.
+## Links & Resources
 
-For instance, I came from shops that used a CMS where I could add html, css and JavaScript to a CMS "asset" which was then wrapped by the site header, rail and footer. Here at [SCPR](http://www.scpr.org/), I've been lucky enough to have mentors who wanted to and helped to create something similar.
+- [Blog Post](http://www.chrislkeller.com/some-thoughts-after-a-couple-months-with-tabl)
+- [Repo](https://gist.github.com/4700210)
 
-[This project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom structure that lies outside of the CMS. The header and footer are each Handlebars templates, external files that I add to each new project. If I need to change a link in the footer I change it in one place and it's changed on all project pages using the template. Same goes for the header.
-
-You could easily recreate something similar. Let's say your template structure is something like:
-
-		<body>
-		    <div id="data-header"></div>
-		        <div id="data-container">
-		            <div class="row-fluid">
-		                <div class="span4">
-		                    <div id="data-details"></div>
-		                </div>
-		                <div class="span8">
-		                    <div id="data-visuals"></div>
-		                </div>
-		            </div>
-		        </div>
-		    <div id="data-footer"></div>
-		</body>
-
-You can probably spot some candidates for possible Handlebars templates now; data-header, data-details, data-visuals and data footer all make sense, where data-header and data-footer could be used on all projects.
-
-Or say you want to quickly create a table to display some information. Using the data file from my earlier example, I can create a Handlebars template to do just that:
-
-		<table class="table">
-		    <tbody>
-		        <tr>
-		            {{#objects}}
-		                <td>{{Title}}</td>
-		                <td>{{Data}}</td>
-		                <td>{{Source}}</td>
-		            {{/objects}}
-		        </tr>
-		    </tbody>
-		</table>
-
-## Wrap up
-
-As an intermediate beginner to the world of web development, and entering my fifth year of being an "online guy" in a newsroom, I've found Handlebars to be a lot of fun. To increase that fun, there are all kinds of add ons and helper functions that you can use. [swag.js](http://elving.github.com/swag/) might be the most fun thus far.
-
-See while Handlebars tried to keep logic out of the templates -- and I respect that -- there some things I'd like to be able to do, and swag.js allows for some of that. For instance, if in my table example I wanted the title to be in all-caps I can do this with swag:
-
-		{{uppercase Title}}
+----
 
-Or if I want to evaluate the data in my flat JSON file, I can run comparisons on my Handlebars templates.
+## License
 
-		{{#objects}}
-		    {{#is Source 'National Employment Law Project'}}
-		        <td>The Source is {{Source}}</td>
-		    {{else}}
-		        <td>No Source</td>
-		    {{/is}}
-		{{/objects}}
+[The MIT License](http://opensource.org/licenses/MIT)
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## Display data from a flat JSON file on a Handlebars.js template file rendered with AJAX
+# Handlebars.js template file rendered with AJAX
 
 **tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
 
@@ -8,7 +8,7 @@
 
 ----
 
-### Overview
+## Overview
 
 [Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...
 
@@ -32,7 +32,7 @@ There are some really good resources out there for those who want to start using
 
 I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
 
-### Walkthrough
+## Walkthrough
 
 Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
 
@@ -179,7 +179,7 @@ Or say you want to quickly create a table to display some information. Using the
 		    </tbody>
 		</table>
 
-### Wrapup
+## Wrap up
 
 As an intermediate beginner to the world of web development, and entering my fifth year of being an "online guy" in a newsroom, I've found Handlebars to be a lot of fun. To increase that fun, there are all kinds of add ons and helper functions that you can use. [swag.js](http://elving.github.com/swag/) might be the most fun thus far.
 

diff --git a/README.md b/README.md
@@ -32,10 +32,6 @@ There are some really good resources out there for those who want to start using
 
 I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
 
->[Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
->
->[Repo](https://gist.github.com/3230081)
-
 ### Walkthrough
 
 Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).

diff --git a/README.md b/README.md
@@ -55,13 +55,19 @@ Thankfully this function based on [code from here](http://berzniz.com/post/24743
 	    });
 	}
 
-I can then call it like this, where dataDetailsTemplate.handlebars is the name of my template, and #data-details is the css selector I am targeting.
 
-		// render compiled handlebars template
-		function renderDataVisualsTemplate(data){
-		    handlebarsDebugHelper();
-		    renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
-		};
+I then abstract out a function to display the compiled template, passing in the name of the template, the css selector I am targeting and the data I want to display.
+
+        // function to compile handlebars template
+        function renderHandlebarsTemplate(withTemplate,inElement,withData){
+            getTemplateAjax(withTemplate, function(template) {
+                jqueryNoConflict(inElement).html(template(withData));
+            })
+        };
+
+I can then call it like this, where dataDetailsTemplate.handlebars is the name of my template, and #data-details is the css selector I am targeting, and data is what I want to display.
+
+        renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
 
 Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months.
 

diff --git a/index.html b/index.html
@@ -1,7 +1,5 @@
 <title>flat-file > > ajax > handlebars</title>
-
 <link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
-
 <style type="text/css">
 
     /*
@@ -13,13 +11,12 @@
     #data-container {background: #fff; width: 960px; margin: 0 auto 0 auto; padding: 15px;}
     #data-details {margin: 10px auto 0 auto;}
 </style>
-
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
 
 <body>
-<div id="data-container">
-    <div id="data-details"></div>
-</div>
+    <div id="data-container">
+        <div id="data-details"></div>
+    </div>
 </body>
 
 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>

diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 **tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
 
 - [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+- [Blog Post](http://www.chrislkeller.com/display-data-from-a-flat-json-file-on-a-handl)
 - [Repo](https://gist.github.com/3230081)
 
 ----

diff --git a/README.md b/README.md
@@ -56,13 +56,10 @@ Thankfully this function based on [code from here](http://berzniz.com/post/24743
 
 I can then call it like this, where dataDetailsTemplate.handlebars is the name of my template, and #data-details is the css selector I am targeting.
 
-		// create projects content template
+		// render compiled handlebars template
 		function renderDataVisualsTemplate(data){
-		    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
-
-		        // adds debugging information to console
-		        jqueryNoConflict('#data-details').html(template(data));
-		    })
+		    handlebarsDebugHelper();
+		    renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
 		};
 
 Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months.
@@ -89,18 +86,25 @@ When the DOM is ready I call the *retriveData()* function which kind of starts t
 		    jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
 		};
 
-*renderDataVisualsTemplate()* gets an argument that represents my the data from my flat JSON file. Again, dataDetailsTemplate.handlebars is the name of my template and #data-details is the css selector where I will inject my template that will be filled with data.
+*renderDataVisualsTemplate()* gets an argument that represents my the data from my flat JSON file. This function runs my base handlebars template function using the name of my template (dataDetailsTemplate.handlebars), the css selector where I will inject my template (#data-details) and the data I will fill it with (data).
 
-		// create projects content template
+		// render compiled handlebars template
 		function renderDataVisualsTemplate(data){
-		    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
-		        handlebarsDebugHelper();
-		        jqueryNoConflict('#data-details').html(template(data));
-		    })
+		    handlebarsDebugHelper();
+		    renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
 		};
 
 After that, I have my function to pull my Handlebars template from an external file and compile it. I've also included a Handlebars debugger, a "helper" function shows information about the data I am trying to work with.
 
+The base handlebars template function looks like this, and takes three parameters: the name of the template, the css selector and the data object:
+
+		// function to compile handlebars template
+		function renderHandlebarsTemplate(withTemplate,inElement,withData){
+		    getTemplateAjax(withTemplate, function(template) {
+		        jqueryNoConflict(inElement).html(template(withData));
+		    })
+		};
+
 Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the Handlebars walkthrough.
 
 		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]}

diff --git a/data-script.js b/data-script.js
@@ -12,12 +12,10 @@ function retriveData() {
     jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
 };
 
-// create projects content template
+// render compiled handlebars template
 function renderDataVisualsTemplate(data){
-    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
-        handlebarsDebugHelper();
-        jqueryNoConflict('#data-details').html(template(data));
-    })
+    handlebarsDebugHelper();
+    renderHandlebarsTemplate('dataDetailsTemplate.handlebars', '#data-details', data);
 };
 
 // render handlebars templates via ajax
@@ -31,8 +29,14 @@ function getTemplateAjax(path, callback) {
             if (callback) callback(template);
         }
     });
-}
-//end
+};
+
+// function to compile handlebars template
+function renderHandlebarsTemplate(withTemplate,inElement,withData){
+    getTemplateAjax(withTemplate, function(template) {
+        jqueryNoConflict(inElement).html(template(withData));
+    })
+};
 
 // add handlebars debugger
 function handlebarsDebugHelper(){
@@ -41,5 +45,4 @@ function handlebarsDebugHelper(){
         console.log("====================");
         console.log(this);
     });
-};
-// end
+};
diff --git a/dataDetailsTemplate.handlebars b/dataDetailsTemplate.handlebars
@@ -1,7 +1,6 @@
 <div>
 
     {{debug}}
-
     <h2>Flat file data displayed on a handlebars.js template loaded with ajax</h2>
     {{#objects}}
         <p>{{Title}}: <strong>{{Data}}</strong><br />

diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 ----
 
-#### Overview
+### Overview
 
 [Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...
 
@@ -32,9 +32,10 @@ There are some really good resources out there for those who want to start using
 I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
 
 >[Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+>
 >[Repo](https://gist.github.com/3230081)
 
-#### Walkthrough
+### Walkthrough
 
 Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
 
@@ -130,7 +131,7 @@ My HTML page isn't any special, other than have a div that will have all kinds o
 
 	<div id="data-details"></div>
 
-#### Practical Applications?
+### Practical Applications?
 
 Your mileage might vary, but I've found several practical applications of Handlebars.js just by looking at my needs.
 
@@ -171,7 +172,7 @@ Or say you want to quickly create a table to display some information. Using the
 		    </tbody>
 		</table>
 
-#### Wrapup
+### Wrapup
 
 As an intermediate beginner to the world of web development, and entering my fifth year of being an "online guy" in a newsroom, I've found Handlebars to be a lot of fun. To increase that fun, there are all kinds of add ons and helper functions that you can use. [swag.js](http://elving.github.com/swag/) might be the most fun thus far.
 

diff --git a/README.md b/README.md
@@ -1,5 +1,12 @@
 ## Display data from a flat JSON file on a Handlebars.js template file rendered with AJAX
 
+**tl;dr**: The README on the repo below gives a bit of a walkthrough and demonstration of the script I've been using to display a flat data file on Handlebars templates rendered with AJAX, which has allowed me to learn to deploy interactive data projects fairly fast.
+
+- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+- [Repo](https://gist.github.com/3230081)
+
+----
+
 #### Overview
 
 [Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...
@@ -15,13 +22,7 @@
 
 	var context = {title: "My New Post", body: "This is my first post!"}
 
-The Handlebars.js documentation describes adding templates to bottom of your index.html file like this:
-
-        <script id="entry-template" type="text/x-handlebars-template">
-	        {{template content}}
-        </script>
-
-There are some good resources out there for those who want to start using the Handlebars JavaScript template library. Here are some links:
+There are some really good resources out there for those who want to start using the Handlebars JavaScript template library. Here are some links:
 
 - [Handlebars site](http://handlebarsjs.com/)
 - [Handlebars GitHubRepo](https://github.com/wycats/handlebars.js/)
@@ -30,8 +31,8 @@ There are some good resources out there for those who want to start using the Ha
 
 I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
 
-- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
-- [Repo](https://gist.github.com/3230081)
+>[Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+>[Repo](https://gist.github.com/3230081)
 
 #### Walkthrough
 
@@ -178,7 +179,7 @@ See while Handlebars tried to keep logic out of the templates -- and I respect t
 
 		{{uppercase Title}}
 
-Or if I want to evaluate the data in my flat JSON file, I can run comparisons on my Handlebars templates.  
+Or if I want to evaluate the data in my flat JSON file, I can run comparisons on my Handlebars templates.
 
 		{{#objects}}
 		    {{#is Source 'National Employment Law Project'}}

diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+## Display data from a flat JSON file on a Handlebars.js template file rendered with AJAX
+
 #### Overview
 
 [Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...

diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
 
 	var context = {title: "My New Post", body: "This is my first post!"}
 
-The handlebars.js documentation describes adding templates to bottom of your index.html file like this:
+The Handlebars.js documentation describes adding templates to bottom of your index.html file like this:
 
         <script id="entry-template" type="text/x-handlebars-template">
 	        {{template content}}
@@ -33,7 +33,7 @@ I'd like to demonstrate a bit of the script I've been using to display a flat da
 
 #### Walkthrough
 
-Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
+Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store Handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
 
 Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that.
 
@@ -77,7 +77,7 @@ When the DOM is ready I call the *retriveData()* function which kind of starts t
 		});
 		//end main function
 
-*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my handlebars template to the page with data in it.
+*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my Handlebars template to the page with data in it.
 
 		// grab data
 		function retriveData() {
@@ -95,13 +95,13 @@ When the DOM is ready I call the *retriveData()* function which kind of starts t
 		    })
 		};
 
-After that, I have my function to pull my handlebars template from an external file and compile it. I've also included a handlebars debugger, a "helper" function shows information about the data I am trying to work with.
+After that, I have my function to pull my Handlebars template from an external file and compile it. I've also included a Handlebars debugger, a "helper" function shows information about the data I am trying to work with.
 
-Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the handlebars walkthrough.
+Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the Handlebars walkthrough.
 
 		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]}
 
-To render the data, the handlebars template is structured just as it would be if it was inline on the index.html page, save for wrapping it in a script tag.
+To render the data, the Handlebars template is structured just as it would be if it was inline on the index.html page, save for wrapping it in a script tag.
 
 		<div>
 		    {{debug}}
@@ -123,7 +123,7 @@ be rendered to the page and structured in a certain way.
         <p>{{Title}}: <strong>{{Data}}</strong><br />
         -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
 
-My HTML page isn't any special, other than have a div that will have all kinds of data injected into it thanks to handlebars.
+My HTML page isn't any special, other than have a div that will have all kinds of data injected into it thanks to Handlebars.
 
 	<div id="data-details"></div>
 
@@ -133,7 +133,7 @@ Your mileage might vary, but I've found several practical applications of Handle
 
 For instance, I came from shops that used a CMS where I could add html, css and JavaScript to a CMS "asset" which was then wrapped by the site header, rail and footer. Here at [SCPR](http://www.scpr.org/), I've been lucky enough to have mentors who wanted to and helped to create something similar.
 
-[This project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom structure that lies outside of the CMS. The header and footer are each handlebars templates, external files that I add to each new project. If I need to change a link in the footer I change it in one place and it's changed on all project pages using the template. Same goes for the header.
+[This project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom structure that lies outside of the CMS. The header and footer are each Handlebars templates, external files that I add to each new project. If I need to change a link in the footer I change it in one place and it's changed on all project pages using the template. Same goes for the header.
 
 You could easily recreate something similar. Let's say your template structure is something like:
 
@@ -154,7 +154,7 @@ You could easily recreate something similar. Let's say your template structure i
 
 You can probably spot some candidates for possible Handlebars templates now; data-header, data-details, data-visuals and data footer all make sense, where data-header and data-footer could be used on all projects.
 
-Or say you want to quickly create a table to display some information. Using the data file from my earlier example, I can create a handlebars template to do just that:
+Or say you want to quickly create a table to display some information. Using the data file from my earlier example, I can create a Handlebars template to do just that:
 
 		<table class="table">
 		    <tbody>

diff --git a/README.md b/README.md
@@ -168,3 +168,20 @@ Or say you want to quickly create a table to display some information. Using the
 		    </tbody>
 		</table>
 
+#### Wrapup
+
+As an intermediate beginner to the world of web development, and entering my fifth year of being an "online guy" in a newsroom, I've found Handlebars to be a lot of fun. To increase that fun, there are all kinds of add ons and helper functions that you can use. [swag.js](http://elving.github.com/swag/) might be the most fun thus far.
+
+See while Handlebars tried to keep logic out of the templates -- and I respect that -- there some things I'd like to be able to do, and swag.js allows for some of that. For instance, if in my table example I wanted the title to be in all-caps I can do this with swag:
+
+		{{uppercase Title}}
+
+Or if I want to evaluate the data in my flat JSON file, I can run comparisons on my Handlebars templates.  
+
+		{{#objects}}
+		    {{#is Source 'National Employment Law Project'}}
+		        <td>The Source is {{Source}}</td>
+		    {{else}}
+		        <td>No Source</td>
+		    {{/is}}
+		{{/objects}}
diff --git a/README.md b/README.md
@@ -33,9 +33,9 @@ I'd like to demonstrate a bit of the script I've been using to display a flat da
 
 #### Walkthrough
 
-Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
+Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).
 
-Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that. 
+Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that.
 
 	// render handlebars templates via ajax
 	function getTemplateAjax(path, callback) {
@@ -55,29 +55,29 @@ I can then call it like this, where dataDetailsTemplate.handlebars is the name o
 		// create projects content template
 		function renderDataVisualsTemplate(data){
 		    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
-		
+
 		        // adds debugging information to console
 		        jqueryNoConflict('#data-details').html(template(data));
 		    })
 		};
 
-Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months. 
+Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months.
 
-I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
+I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors.
 
 In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:
 
 		var jqueryNoConflict = jQuery;
 
-When the DOM is ready I call the *retriveData()* function which kind of starts the whole ball rolling: 
+When the DOM is ready I call the *retriveData()* function which kind of starts the whole ball rolling:
 
 		//begin main function
 		jqueryNoConflict(document).ready(function(){
 		    retriveData();
 		});
 		//end main function
 
-*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my handlebars template to the page with data in it. 
+*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my handlebars template to the page with data in it.
 
 		// grab data
 		function retriveData() {
@@ -95,15 +95,15 @@ When the DOM is ready I call the *retriveData()* function which kind of starts t
 		    })
 		};
 
-After that, I have my function to pull my handlebars template from an external file and compile it. I've also included a handlebars debugger, a "helper" function shows information about the data I am trying to work with.   
+After that, I have my function to pull my handlebars template from an external file and compile it. I've also included a handlebars debugger, a "helper" function shows information about the data I am trying to work with.
 
 Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the handlebars walkthrough.
 
-		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]} 
+		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]}
 
 To render the data, the handlebars template is structured just as it would be if it was inline on the index.html page, save for wrapping it in a script tag.
 
-		<div>		 
+		<div>
 		    {{debug}}
 		    <h2>Flat file data displayed on a handlebars.js template loaded with ajax</h2>
 		    {{#objects}}
@@ -124,7 +124,7 @@ be rendered to the page and structured in a certain way.
         -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
 
 My HTML page isn't any special, other than have a div that will have all kinds of data injected into it thanks to handlebars.
-	
+
 	<div id="data-details"></div>
 
 #### Practical Applications?
@@ -168,4 +168,3 @@ Or say you want to quickly create a table to display some information. Using the
 		    </tbody>
 		</table>
 
-
diff --git a/README.md b/README.md
@@ -26,14 +26,14 @@ There are some good resources out there for those who want to start using the Ha
 - [NetTuts Handlebars Walkthrough](http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/)
 - Three-part series on using Handlebars: [Part one](http://blog.teamtreehouse.com/getting-started-with-handlebars-js); [Part two](http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/); [Part three](http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks)
 
-I'd like to demonstrate how I've used Handlebars templates in a newsroom environment to make deploying interactive projects fairly fast. This example will take data from a flat JSON file I created from a csv, display the data in a handlebars template stored in a separate file and render that template on a webpage.
+I'd like to demonstrate a bit of the script I've been using to display a flat data file on Handlebars templates render with AJAX, and give a couple practical applications for using Handlebars in a newsroom environment in order to deploy interactive projects fairly fast.
 
 - [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
 - [Repo](https://gist.github.com/3230081)
 
 #### Walkthrough
 
-Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
+Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to mimic some of that functionality and store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
 
 Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that. 
 
@@ -57,12 +57,13 @@ I can then call it like this, where dataDetailsTemplate.handlebars is the name o
 		    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
 		
 		        // adds debugging information to console
-		        handlebarsDebugHelper();
 		        jqueryNoConflict('#data-details').html(template(data));
 		    })
 		};
 
-Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months. I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
+Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months. 
+
+I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
 
 In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:
 
@@ -126,12 +127,45 @@ My HTML page isn't any special, other than have a div that will have all kinds o
 
 	<div id="data-details"></div>
 
-I've found several practical applications of this demonstration, but your mileage might very. All it really takes though is some imagination and a need.
+#### Practical Applications?
+
+Your mileage might vary, but I've found several practical applications of Handlebars.js just by looking at my needs.
+
+For instance, I came from shops that used a CMS where I could add html, css and JavaScript to a CMS "asset" which was then wrapped by the site header, rail and footer. Here at [SCPR](http://www.scpr.org/), I've been lucky enough to have mentors who wanted to and helped to create something similar.
+
+[This project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom structure that lies outside of the CMS. The header and footer are each handlebars templates, external files that I add to each new project. If I need to change a link in the footer I change it in one place and it's changed on all project pages using the template. Same goes for the header.
+
+You could easily recreate something similar. Let's say your template structure is something like:
+
+		<body>
+		    <div id="data-header"></div>
+		        <div id="data-container">
+		            <div class="row-fluid">
+		                <div class="span4">
+		                    <div id="data-details"></div>
+		                </div>
+		                <div class="span8">
+		                    <div id="data-visuals"></div>
+		                </div>
+		            </div>
+		        </div>
+		    <div id="data-footer"></div>
+		</body>
 
-For instance, I came from shops that used the same CMS, where I could add html, css and JavaScript to a CMS "asset" which would then be wrapped up in the site header, rail and footer. Here at SCPR, I've been lucky enough to have mentors who wanted to and helped to create something similar.
+You can probably spot some candidates for possible Handlebars templates now; data-header, data-details, data-visuals and data footer all make sense, where data-header and data-footer could be used on all projects.
 
-For instance, [this project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom template that lies outside of the CMS. The header and footer are each handlebars templates, external files that are added to each project. Need to change a link in the footer? Change it in one place and it's changed on all project pages that use the template. Same goes for the header.
+Or say you want to quickly create a table to display some information. Using the data file from my earlier example, I can create a handlebars template to do just that:
 
-#### License
+		<table class="table">
+		    <tbody>
+		        <tr>
+		            {{#objects}}
+		                <td>{{Title}}</td>
+		                <td>{{Data}}</td>
+		                <td>{{Source}}</td>
+		            {{/objects}}
+		        </tr>
+		    </tbody>
+		</table>
 
-[The MIT License](http://opensource.org/licenses/MIT)
+ 
diff --git a/index.html b/index.html
@@ -1,26 +1,26 @@
-<title>flat-file > > ajax > handlebars</title>
-
-<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
-
-<style type="text/css">
-
-    /*
-    body background using Crayola crayon color from
-    Ben Welsh gist: https://gist.github.com/4348665
-    */
-
-    body {background: #926EAE;}
-    #data-container {background: #fff; width: 960px; margin: 0 auto 0 auto; padding: 15px;}
-    #data-details {margin: 10px auto 0 auto;}
-</style>
-
-<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
-
-<body>
-<div id="data-container">
-    <div id="data-details"></div>
-</div>
-</body>
-
-<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
+<title>flat-file > > ajax > handlebars</title>
+
+<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
+
+<style type="text/css">
+
+    /*
+    body background using Crayola crayon color from
+    Ben Welsh gist: https://gist.github.com/4348665
+    */
+
+    body {background: #926EAE;}
+    #data-container {background: #fff; width: 960px; margin: 0 auto 0 auto; padding: 15px;}
+    #data-details {margin: 10px auto 0 auto;}
+</style>
+
+<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
+
+<body>
+<div id="data-container">
+    <div id="data-details"></div>
+</div>
+</body>
+
+<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
 <script type="text/javascript" src="data-script.js"></script>
diff --git a/README.md b/README.md
@@ -1,27 +1,39 @@
-### Loading handlebars template with AJAX & displaying flat file data
+#### Overview
+
+[Handlebars.js](http://handlebarsjs.com/) is a templating library -- much like mustache.js -- that "provides the power necessary to let you build semantic templates" based on data that is formatted as -- get this -- javascript objects. Using an example from the handlebar.js website, the library allows you to do things like this...
+
+	<div class="entry">
+		<h1>{{title}}</h1>
+		<div class="body">
+			{{body}}
+		</div>
+	</div>
+
+… where {{title}} and {{body}} represents information stored in an object like this:
+
+	var context = {title: "My New Post", body: "This is my first post!"}
+
+The handlebars.js documentation describes adding templates to bottom of your index.html file like this:
+
+        <script id="entry-template" type="text/x-handlebars-template">
+	        {{template content}}
+        </script>
 
 There are some good resources out there for those who want to start using the Handlebars JavaScript template library. Here are some links:
 
 - [Handlebars site](http://handlebarsjs.com/)
 - [Handlebars GitHubRepo](https://github.com/wycats/handlebars.js/)
 - [NetTuts Handlebars Walkthrough](http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/)
-- Three-part series on using Handlebars:[Part one](http://blog.teamtreehouse.com/getting-started-with-handlebars-js); [Part two](http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/); [Part three](http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks)
+- Three-part series on using Handlebars: [Part one](http://blog.teamtreehouse.com/getting-started-with-handlebars-js); [Part two](http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/); [Part three](http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks)
 
-I'd instead like to demonstrate how I've been able to use Handlebars templates in a newsroom environment to make deploying interactive projects fairly fast. This example will take a flat json file I created from a csv, display it in a handlebars template stored in a separate file and render that template on a webpage.
+I'd like to demonstrate how I've used Handlebars templates in a newsroom environment to make deploying interactive projects fairly fast. This example will take data from a flat JSON file I created from a csv, display the data in a handlebars template stored in a separate file and render that template on a webpage.
 
 - [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
-
 - [Repo](https://gist.github.com/3230081)
 
-#### Overview
-
-The handlebars.js documentation describes adding templates to bottom of your index.html file like this:
-
-        <script id="entry-template" type="text/x-handlebars-template">
-	        {{template content}}
-        </script>
+#### Walkthrough
 
-Coming across this after learning the basics of django templating, I really wanted a way to store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
+Coming across Handlebars.js after learning the basics of django templating, I really wanted a way to store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
 
 Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that. 
 
@@ -50,8 +62,6 @@ I can then call it like this, where dataDetailsTemplate.handlebars is the name o
 		    })
 		};
 
-#### Walkthrough
-
 Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months. I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
 
 In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:

diff --git a/index.html b/index.html
@@ -1,26 +1,26 @@
-<title>flat-file > > ajax > handlebars</title>
-
-<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
-
-<style type="text/css">
-
-    /*
-    body background using Crayola crayon color from
-    Ben Welsh gist: https://gist.github.com/4348665
-    */
-
-    body {background: #926EAE;}
-    #data-container {background: #fff; width: 960px; margin: 0 auto 0 auto; padding: 15px;}
-    #data-details {margin: 10px auto 0 auto;}
-</style>
-
-<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
-
-<body>
-<div id="data-container">
-    <div id="data-details"></div>
-</div>
-</body>
-
-<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
+<title>flat-file > > ajax > handlebars</title>
+
+<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
+
+<style type="text/css">
+
+    /*
+    body background using Crayola crayon color from
+    Ben Welsh gist: https://gist.github.com/4348665
+    */
+
+    body {background: #926EAE;}
+    #data-container {background: #fff; width: 960px; margin: 0 auto 0 auto; padding: 15px;}
+    #data-details {margin: 10px auto 0 auto;}
+</style>
+
+<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
+
+<body>
+<div id="data-container">
+    <div id="data-details"></div>
+</div>
+</body>
+
+<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
 <script type="text/javascript" src="data-script.js"></script>
diff --git a/README.md b/README.md
@@ -1,24 +1,15 @@
 ### Loading handlebars template with AJAX & displaying flat file data
 
-There are some good resources out there for those who want to start using the handlebars JavaScript template library, so I don't want to start from scratch with it.
+There are some good resources out there for those who want to start using the Handlebars JavaScript template library. Here are some links:
 
+- [Handlebars site](http://handlebarsjs.com/)
+- [Handlebars GitHubRepo](https://github.com/wycats/handlebars.js/)
+- [NetTuts Handlebars Walkthrough](http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/)
+- Three-part series on using Handlebars:[Part one](http://blog.teamtreehouse.com/getting-started-with-handlebars-js); [Part two](http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/); [Part three](http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks)
 
-http://handlebarsjs.com/
+I'd instead like to demonstrate how I've been able to use Handlebars templates in a newsroom environment to make deploying interactive projects fairly fast. This example will take a flat json file I created from a csv, display it in a handlebars template stored in a separate file and render that template on a webpage.
 
-http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/
-
-http://blog.teamtreehouse.com/getting-started-with-handlebars-js
-
-http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/
-
-http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks
-
-
-But I would like to try to demonstrate how I've ramped up my use of handlebars templates over the past couple months in a newsroom environment, and how it's made deploying interactive projects fairly fast.
-
-This example will take a flat json file I created from a csv and display it in a handlebars template stored in a separate file and rendered on a web page.
-
-- [Demo](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+- [Demo Page](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
 
 - [Repo](https://gist.github.com/3230081)
 

diff --git a/README.md b/README.md
@@ -2,6 +2,18 @@
 
 There are some good resources out there for those who want to start using the handlebars JavaScript template library, so I don't want to start from scratch with it.
 
+
+http://handlebarsjs.com/
+
+http://net.tutsplus.com/tutorials/javascript-ajax/introduction-to-handlebars/
+
+http://blog.teamtreehouse.com/getting-started-with-handlebars-js
+
+http://blog.teamtreehouse.com/code/handlebars-js-part-2-partials-and-helpers/
+
+http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks
+
+
 But I would like to try to demonstrate how I've ramped up my use of handlebars templates over the past couple months in a newsroom environment, and how it's made deploying interactive projects fairly fast.
 
 This example will take a flat json file I created from a csv and display it in a handlebars template stored in a separate file and rendered on a web page.
@@ -20,7 +32,7 @@ The handlebars.js documentation describes adding templates to bottom of your ind
 
 Coming across this after learning the basics of django templating, I really wanted a way to store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
 
-Thankfully this function helps me to do exactly that. 
+Thankfully this function based on [code from here](http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro) helps me to do exactly that. 
 
 	// render handlebars templates via ajax
 	function getTemplateAjax(path, callback) {

diff --git a/README.md b/README.md
@@ -6,6 +6,10 @@ But I would like to try to demonstrate how I've ramped up my use of handlebars t
 
 This example will take a flat json file I created from a csv and display it in a handlebars template stored in a separate file and rendered on a web page.
 
+- [Demo](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+
+- [Repo](https://gist.github.com/3230081)
+
 #### Overview
 
 The handlebars.js documentation describes adding templates to bottom of your index.html file like this:
@@ -45,29 +49,29 @@ I can then call it like this, where dataDetailsTemplate.handlebars is the name o
 
 #### Walkthrough
 
-Let's go through the full data-script.js file, because there's a lot in there that I've kind of picked up over the last several months. I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
+Let's go through the full [data-script.js file](https://gist.github.com/raw/3230081/31abdbfb3f4746f8fb761d196dcfa81cdd38184d/data-script.js), because there's a lot in there that I've kind of picked up over the last several months. I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
 
 In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:
 
 		var jqueryNoConflict = jQuery;
 
-Then when the DOM is ready I call the function that kind of starts the whole ball rolling: 
+When the DOM is ready I call the *retriveData()* function which kind of starts the whole ball rolling: 
 
 		//begin main function
 		jqueryNoConflict(document).ready(function(){
 		    retriveData();
 		});
 		//end main function
 
-retriveData() looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called renderDataVisualsTemplate(). This is the function that will render my handlebars template to the page with data in it. 
+*retriveData()* looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called *renderDataVisualsTemplate()*. This is the function that will render my handlebars template to the page with data in it. 
 
 		// grab data
 		function retriveData() {
 		    var dataSource = 'working-data-file.json';
 		    jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
 		};
 
-renderDataVisualsTemplate() gets an argument that represents my the data from my flat JSON file. Again, dataDetailsTemplate.handlebars is the name of my template and #data-details is the css selector where I will inject my template that will be filled with data.
+*renderDataVisualsTemplate()* gets an argument that represents my the data from my flat JSON file. Again, dataDetailsTemplate.handlebars is the name of my template and #data-details is the css selector where I will inject my template that will be filled with data.
 
 		// create projects content template
 		function renderDataVisualsTemplate(data){
@@ -77,7 +81,7 @@ renderDataVisualsTemplate() gets an argument that represents my the data from my
 		    })
 		};
 
-After that, I have my function to pull my handlebars template from an external file and compile it. I've also included a handlebars debugger, a "helper" function that shows information about the data I am trying to work with.   
+After that, I have my function to pull my handlebars template from an external file and compile it. I've also included a handlebars debugger, a "helper" function shows information about the data I am trying to work with.   
 
 Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the handlebars walkthrough.
 
@@ -109,12 +113,12 @@ My HTML page isn't any special, other than have a div that will have all kinds o
 
 	<div id="data-details"></div>
 
-#### More
+I've found several practical applications of this demonstration, but your mileage might very. All it really takes though is some imagination and a need.
 
-- [Demo](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+For instance, I came from shops that used the same CMS, where I could add html, css and JavaScript to a CMS "asset" which would then be wrapped up in the site header, rail and footer. Here at SCPR, I've been lucky enough to have mentors who wanted to and helped to create something similar.
 
-- [Repo](https://gist.github.com/3230081)
+For instance, [this project](http://projects.scpr.org/static/maps/pedestrian-safety/) is on a custom template that lies outside of the CMS. The header and footer are each handlebars templates, external files that are added to each project. Need to change a link in the footer? Change it in one place and it's changed on all project pages that use the template. Same goes for the header.
 
-----
+#### License
 
-**License:** [The MIT License](http://opensource.org/licenses/MIT)
+[The MIT License](http://opensource.org/licenses/MIT)
diff --git a/README.md b/README.md
@@ -59,20 +59,27 @@ Then when the DOM is ready I call the function that kind of starts the whole bal
 		});
 		//end main function
 
-retriveData() looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through another function called processDataFrom();
+retriveData() looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through a function called renderDataVisualsTemplate(). This is the function that will render my handlebars template to the page with data in it. 
 
 		// grab data
 		function retriveData() {
 		    var dataSource = 'working-data-file.json';
-		    jqueryNoConflict.getJSON(dataSource, processDataFrom);
+		    jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
 		};
 
-processDataFrom() gets an argument that represents my the data from my flat JSON file, which is 
-
+renderDataVisualsTemplate() gets an argument that represents my the data from my flat JSON file. Again, dataDetailsTemplate.handlebars is the name of my template and #data-details is the css selector where I will inject my template that will be filled with data.
 
+		// create projects content template
+		function renderDataVisualsTemplate(data){
+		    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
+		        handlebarsDebugHelper();
+		        jqueryNoConflict('#data-details').html(template(data));
+		    })
+		};
 
+After that, I have my function to pull my handlebars template from an external file and compile it. I've also included a handlebars debugger, a "helper" function that shows information about the data I am trying to work with.   
 
-I'm also using a separate file to hold the data that will be rendered to the page. It's structured as it is in the handlebars walkthrough.
+Let's take a look at the flat JSON file I am using to hold the data that will be rendered to the page. It's structured as it is in the handlebars walkthrough.
 
 		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]} 
 
@@ -98,6 +105,10 @@ be rendered to the page and structured in a certain way.
         <p>{{Title}}: <strong>{{Data}}</strong><br />
         -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
 
+My HTML page isn't any special, other than have a div that will have all kinds of data injected into it thanks to handlebars.
+
+	<div id="data-details"></div>
+
 #### More
 
 - [Demo](http://projects.chrislkeller.com/snippets/ajax-handlebars/)

diff --git a/README.md b/README.md
@@ -1,20 +1,108 @@
 ### Loading handlebars template with AJAX & displaying flat file data
 
+There are some good resources out there for those who want to start using the handlebars JavaScript template library, so I don't want to start from scratch with it.
 
+But I would like to try to demonstrate how I've ramped up my use of handlebars templates over the past couple months in a newsroom environment, and how it's made deploying interactive projects fairly fast.
 
-### ajax-handlebars
+This example will take a flat json file I created from a csv and display it in a handlebars template stored in a separate file and rendered on a web page.
 
-Uses ajax to render a Handlebars template file. A demo is [here](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+#### Overview
 
+The handlebars.js documentation describes adding templates to bottom of your index.html file like this:
 
+        <script id="entry-template" type="text/x-handlebars-template">
+	        {{template content}}
+        </script>
 
-### search-address-map-marker
+Coming across this after learning the basics of django templating, I really wanted a way to store handlebars templates in [reusable, decoupled files that could be shared across projects](https://github.com/wycats/handlebars.js/issues/82).  
 
-Plots a marker on a map after a user inputs their address.
+Thankfully this function helps me to do exactly that. 
 
-- [Demo](http://projects.chrislkeller.com/demos/search-address-map-marker)
+	// render handlebars templates via ajax
+	function getTemplateAjax(path, callback) {
+	    var source, template;
+	    jqueryNoConflict.ajax({
+	        url: path,
+	        success: function (data) {
+	            source = data;
+	            template = Handlebars.compile(source);
+	            if (callback) callback(template);
+	        }
+	    });
+	}
 
-- [Repo](https://gist.github.com/4370707)
+I can then call it like this, where dataDetailsTemplate.handlebars is the name of my template, and #data-details is the css selector I am targeting.
+
+		// create projects content template
+		function renderDataVisualsTemplate(data){
+		    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
+		
+		        // adds debugging information to console
+		        handlebarsDebugHelper();
+		        jqueryNoConflict('#data-details').html(template(data));
+		    })
+		};
+
+#### Walkthrough
+
+Let's go through the full data-script.js file, because there's a lot in there that I've kind of picked up over the last several months. I don't really have an idea if it is "correct" to programmers out there, but I know that it works and doesn't throw me errors. 
+
+In learning to use jQuery in the context of my previous CMS -- which used several jQuery libraries -- I found it just made sense to use a no conflict variable and it's something I've just stuck with:
+
+		var jqueryNoConflict = jQuery;
+
+Then when the DOM is ready I call the function that kind of starts the whole ball rolling: 
+
+		//begin main function
+		jqueryNoConflict(document).ready(function(){
+		    retriveData();
+		});
+		//end main function
+
+retriveData() looks for my flat JSON file, which set to a variable. It then uses jQuery's getJSON method to pull the data and run it through another function called processDataFrom();
+
+		// grab data
+		function retriveData() {
+		    var dataSource = 'working-data-file.json';
+		    jqueryNoConflict.getJSON(dataSource, processDataFrom);
+		};
+
+processDataFrom() gets an argument that represents my the data from my flat JSON file, which is 
+
+
+
+
+I'm also using a separate file to hold the data that will be rendered to the page. It's structured as it is in the handlebars walkthrough.
+
+		{"objects": [{"Source": "National Employment Law Project", "DataOrder": "1", "SourceLink": "http://www.nelp.org/", "Data": "12.29.2012", "Title": "The last day anyone will receive benefits from the Emergency Unemployment Compensation program unless Congress acts to renew it."}, {"Source": "Congressional Budget Office", "DataOrder": "2", "SourceLink": "", "Data": "$30,000,000,000", "Title": "Estimated cost to renew the Emergency Unemployment Compensation program through the end of 2013."}]} 
+
+To render the data, the handlebars template is structured just as it would be if it was inline on the index.html page, save for wrapping it in a script tag.
+
+		<div>		 
+		    {{debug}}
+		    <h2>Flat file data displayed on a handlebars.js template loaded with ajax</h2>
+		    {{#objects}}
+		        <p>{{Title}}: <strong>{{Data}}</strong><br />
+		        -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
+		    {{/objects}}
+		</div>
+
+In this case, I'm asking that every instance of an object
+
+		{{#objects}}
+
+		{{/objects}}
+
+be rendered to the page and structured in a certain way.
+
+        <p>{{Title}}: <strong>{{Data}}</strong><br />
+        -- <a href="{{SourceLink}}" target="_blank"><em>{{Source}}</em></a></p>
+
+#### More
+
+- [Demo](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+
+- [Repo](https://gist.github.com/3230081)
 
 ----
 

diff --git a/data-script.js b/data-script.js
@@ -9,14 +9,16 @@ jqueryNoConflict(document).ready(function(){
 // grab data
 function retriveData() {
     var dataSource = 'working-data-file.json';
-    jqueryNoConflict.getJSON(dataSource, processDataFrom);
+    jqueryNoConflict.getJSON(dataSource, renderDataVisualsTemplate);
 };
 
-// display page template
-function processDataFrom(data){
-    renderDataVisualsTemplate(data);
+// create projects content template
+function renderDataVisualsTemplate(data){
+    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
+        handlebarsDebugHelper();
+        jqueryNoConflict('#data-details').html(template(data));
+    })
 };
-// end
 
 // render handlebars templates via ajax
 function getTemplateAjax(path, callback) {
@@ -40,12 +42,4 @@ function handlebarsDebugHelper(){
         console.log(this);
     });
 };
-// end
-
-// create projects content template
-function renderDataVisualsTemplate(data){
-    getTemplateAjax('dataDetailsTemplate.handlebars', function(template) {
-        handlebarsDebugHelper();
-        jqueryNoConflict('#data-details').html(template(data));
-    })
-};
+// end
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+### Loading handlebars template with AJAX & displaying flat file data
+
+
+
+### ajax-handlebars
+
+Uses ajax to render a Handlebars template file. A demo is [here](http://projects.chrislkeller.com/snippets/ajax-handlebars/)
+
+
+
+### search-address-map-marker
+
+Plots a marker on a map after a user inputs their address.
+
+- [Demo](http://projects.chrislkeller.com/demos/search-address-map-marker)
+
+- [Repo](https://gist.github.com/4370707)
+
+----
+
+**License:** [The MIT License](http://opensource.org/licenses/MIT)
diff --git a/README.md b/README.md
@@ -1,3 +0,0 @@
-### ajax-handlebars
-
-Uses ajax to render a Handlebars template file. A demo is [here](http://projects.chrislkeller.com/snippets/ajax-handlebars/)

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<title>flat-file > handlebars.js</title>
+<title>flat-file > > ajax > handlebars</title>
 
 <link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +0,0 @@
		### ajax-handlebars

		Uses ajax to render a Handlebars template file. A demo is [here](http://projects.chrislkeller.com/snippets/ajax-handlebars/)