infinite scroll tutorial finished

3 files changed, 57 insertions, 7 deletions

diff --git a/examples/infinite-scroll/js/collections/twitter.js b/examples/infinite-scroll/js/collections/twitter.js
index 6024da0..c262e85 100644
--- a/examples/infinite-scroll/js/collections/twitter.js
+++ b/examples/infinite-scroll/js/collections/twitter.js
@@ -3,15 +3,18 @@ define([
   'underscore',
   'backbone'
 ], function($, _, Backbone){
-  var Messages = Backbone.Collection.extend({
+  var Tweets = Backbone.Collection.extend({
     url: function () {
-      return 'http://search.twitter.com/search.json?q=blue%20angels&page=' + this.page + '&callback=?'
+      return 'http://search.twitter.com/search.json?q=' + this.query + '&page=' + this.page + '&callback=?'
     },
+    // Because twitter doesn't return an array of models by default we need
+    // to point Backbone.js at the correct property
     parse: function(resp, xhr) {
       return resp.results;
     },
-    page: 1
+    page: 1,
+    query: 'backbone.js tutorials'
   });
 
-  return Messages;
+  return Tweets;
 });
diff --git a/examples/infinite-scroll/js/router.js b/examples/infinite-scroll/js/router.js
index 2f65042..7f39706 100644
--- a/examples/infinite-scroll/js/router.js
+++ b/examples/infinite-scroll/js/router.js
@@ -16,9 +16,9 @@ define([
     var router = new AppRouter(options);
 
 		router.on('route:defaultAction', function (actions) {
-			require(['views/dashboard/page'], function (DashboardPage) {
-        var dashboardPage = Vm.create(appView, 'DashboardPage', DashboardPage);
-        dashboardPage.render();
+			require(['views/twitter/widget'], function (TwitterWidget) {
+        var twitterWidget = Vm.create(appView, 'TwitterWidget', TwitterWidget);
+        twitterWidget.render();
       });
 		});
     
diff --git a/examples/infinite-scroll/js/views/twitter/widget.js b/examples/infinite-scroll/js/views/twitter/widget.js
new file mode 100644
index 0000000..3d61f20
--- /dev/null
+++ b/examples/infinite-scroll/js/views/twitter/widget.js
@@ -0,0 +1,47 @@
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'vm',
+  'collections/twitter',
+  'text!templates/twitter/list.html'
+], function($, _, Backbone, Vm, TwitterCollection, TwitterListTemplate){
+  var TwitterWidget = Backbone.View.extend({
+    el: '.twitter-widget',
+    initialize: function () {
+      // isLoading is a useful flag to make sure we don't send off more than
+      // one request at a time
+      this.isLoading = false;
+      this.twitterCollection = new TwitterCollection();
+    },
+    render: function () {
+      this.loadResults();
+    },
+    loadResults: function () {
+      var that = this;
+      // we are starting a new load of results so set isLoading to true
+      this.isLoading = true;
+      // fetch is Backbone.js native function for calling and parsing the collection url
+      this.twitterCollection.fetch({ 
+        success: function (tweets) {
+          // Once the results are returned lets populate our template
+          $(that.el).append(_.template(TwitterListTemplate, {tweets: tweets.models, _:_}));
+          // Now we have finished loading set isLoading back to false
+          that.isLoading = false;
+        }
+      });      
+    },
+    // This will simply listen for scroll events on the current el
+    events: {
+      'scroll': 'checkScroll'
+    },
+    checkScroll: function () {
+      var triggerPoint = 100; // 100px from the bottom
+        if( !this.isLoading && this.el.scrollTop + this.el.clientHeight + triggerPoint > this.el.scrollHeight ) {
+          this.twitterCollection.page += 1; // Load next page
+          this.loadResults();
+        }
+    }
+  });
+  return TwitterWidget;
+});