getting documentation ready for presentation

About-Ractive.md

@@ -7,17 +7,17 @@ Too many javascript applications contain repetitive code.  First, you select a a
 
 I love jQuery, but this is bad practice. Too many lines of code and searching by css selectors will slow down your code.
 
-## The JS Framework approach
+## The JS MVC approach
 
 There are plenty of shiny new javascript frameworks to help you be organized and efficient while writing code:
 
 [ToDoMVC - JS Frameworks listing](http://todomvc.com/)
 
-These frameworks provide methods for ajax requests, templating, code-compiling, testing, data-binding, and much more.  
+Most of these applications enforce an MVC model to seperate dependencies, updating, and flow-control. These frameworks provide methods for ajax requests, templating, code-compiling, testing, data-binding, and much more.  
 
 ## The Ractive Approach
 
-Ractive does one thing and it does one thing wonderfully.  Binding a JSON data object to an HTML model.  Take a quick look at this sample code.
+Ractive does one thing and it does one thing wonderfully.  Binding a JSON data object to an HTML view.  Take a quick look at this sample code.
 
 #### HTML
 
@@ -38,3 +38,13 @@ Ractive does one thing and it does one thing wonderfully.  Binding a JSON data o
       template: '<p>{{greeting}}, {{recipient}}!</p>',
       data: { x: 5, y:6 , title: 'Multiplying Numbers'}
     });
+
+
+That was easy, right?  Alright, now you have a ractive javascript object and an html template rendered.  Try checking the data model using `ractive.get()`.
+
+Now you can update the HTML at any time by using ractive.set().  Lets try for example, `ractive.set('x', 10);`.  As you can see, the 
+
+
+### Ractive is deterministic 
+
+Having all of your data bound into one data structure is actually pretty incredible.  You have a Single Source of Truth (SSOT) data object and your HTML template is deterministic.  By deterministic, I mean there is one state that your HTML will be in for a specific data structure (unless some other javascript messed with the template).

README.md

@@ -8,7 +8,6 @@ Sample Usage:
 
     <script src="js/ractive/Ractive-legacy.0.3.9.min.js"></script><!-- Get Ractive-->
     <script src="js/instagram.js"></script> <!-- Get Instagram extension -->
-    <script id='template' type='text/ractive' src='templates/twitter-feed.rac'></script>
 
 
     /** This code is just for the infinite scroll.  You don't have to use this. */
@@ -24,13 +23,18 @@ Sample Usage:
         });
     }
 
-    //Create New Instagram Feed
-    insta = new instagramFeed({
-      el: 'template-target',
-      template: template,
-      clientID: 'Your Instagram Client ID',
-      hashtag: 'webdesign',
-      complete: infiniteScrollBinding
+    // Get our template file.
+    $.get( 'templates/twitter-feed.rac').then( function ( template ) {
+
+      //Create New Instagram Feed
+      insta = new instagramFeed({
+        el: 'template-target',
+        template: template,
+        clientID: 'Your Instagram Client ID',
+        hashtag: 'webdesign',
+        complete: infiniteScrollBinding
+      });
+
     });
 
 

index.html

@@ -55,16 +55,16 @@
         <link rel="stylesheet" href="css/social.css">
         <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/social-ie7.css"><![endif]-->
         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
-<script>
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-ga('create', 'UA-40579003-3', 'ddknoll.github.io');
-ga('send', 'pageview');
+        ga('create', 'UA-40579003-3', 'ddknoll.github.io');
+        ga('send', 'pageview');
 
-</script>
+        </script>
     </head>
     <body id='skrollr-body'>
         <!--[if lt IE 7]>

js/instagram.js

@@ -101,15 +101,13 @@ var instagramFeed = Ractive.extend({
       this.data.clientID = options.clientID;
     }
 
-    //Check URL for search parameter
-    query = (window.location.search.length ? window.location.search.slice(1) : undefined);
     //Init search
-    if(!query && options.search == undefined){
+    if(options.search == undefined){
       console.log('No Hashtag Provided');
       this.success = false;
       return false;
     } else{
-      this.data.search = this.data.searched  = (query !== undefined ? query: options.search);
+      this.data.search = this.data.searched  = options.search;
     }
 
     //Replace data.

js/main.js

@@ -1,6 +1,24 @@
 
 var instafeed = {};
 
+//Check URL for search parameter
+query = (window.location.search.length ? window.location.search.slice(1) : 'dribbble');
+
+var infiniteScrollBinding = function(){
+  //Infinite Scroll Window Bindings
+  $(window).scroll(function(evt){
+    var bod = $('body')[0];
+    pageHeight = bod.offsetHeight;
+    bottomScroll = window.scrollY + bod.clientHeight;
+    if(pageHeight - bottomScroll < 200){
+      insta.load('after');
+    }
+    else if(window.scrollY <= 0){
+      insta.load('before');
+    }
+  });
+}
+
 /**
  * Get the Ractive Template
  */
@@ -12,22 +30,7 @@ $.get( 'templates/twitter-feed.rac').then( function ( template ) {
       el: 'template-target',
       template: template,
       clientID: 'fd88310566744275a3d68092d9c175d1',
-      search: 'dribbble',
-      complete: function(){
-
-        //Infinite Scroll Window Bindings
-        $(window).scroll(function(evt){
-          var bod = $('body')[0];
-          pageHeight = bod.offsetHeight;
-          bottomScroll = window.scrollY + bod.clientHeight;
-          if(pageHeight - bottomScroll < 200){
-            insta.load('after');
-          }
-          else if(window.scrollY <= 0){
-            insta.load('before');
-          }
-        });
-
-      }
+      search: query,
+      complete: infiniteScrollBinding
     });//Ractive init
 });//Get Template