all da files

2013-05-27 13:45:59 -07:00
commit 59d3d30afa
6704 changed files with 1954956 additions and 0 deletions
--- a/node_modules/tabletop/examples/backbone/backbone.html
+++ b/node_modules/tabletop/examples/backbone/backbone.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="../common/cats.css" media="screen" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>A Backbone.js example about cats I've met</h1>
+    <marquee><p>As you can tell, you can make a very complicated web page with this stuff.</p></marquee>
+
+    <script id="cat-template" type="text/underscore-template">
+      <div class="entry">
+        <h2><%= name %>!</h2>
+        <h3>age <%= age %></h3>
+        <div class="body">
+          <%= description %>
+        </div>
+      </div>
+    </script>
+
+
+    <div id="content"></div>
+
+    <script type="text/javascript" src="../common/jquery.js"></script>
+    <script type="text/javascript" src="../common/underscore.js"></script>
+    <script type="text/javascript" src="backbone.js"></script>
+    <script type="text/javascript" src="../../src/backbone.tabletopSync.js"></script>
+    <script type="text/javascript" src="../../src/tabletop.js"></script>
+    <script type="text/javascript">
+      var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdE5OcDE1SENpT1g2R2JEX2tnZ3ZIWHc&output=html';
+        
+      /* 
+        You need to declare the tabletop instance separately, then feed it into the model/collection
+        You *must* specify wait: true so that it doesn't try to fetch when you initialize
+      */
+      var storage = Tabletop.init( { key: public_spreadsheet_url,
+                                      wait: true } )
+
+      /*
+       Need to specify that you'd like to sync using Backbone.tabletopSync
+       Can specify tabletop attributes, or you can do it on the collection
+      */
+      var Cat = Backbone.Model.extend({
+        idAttribute: 'name',
+        tabletop: {
+          instance: storage,
+          sheet: 'Cats'
+        },
+        sync: Backbone.tabletopSync
+      })
+
+      /*
+       Need to specify that you'd like to sync using Backbone.tabletopSync
+       Need to specify a tabletop key and sheet
+      */
+      var CatCollection = Backbone.Collection.extend({
+          // Reference to this collection's model.
+          model: Cat,
+          tabletop: {
+            instance: storage,
+            sheet: 'Cats'
+          },
+          sync: Backbone.tabletopSync
+      });
+
+      var CatView = Backbone.View.extend({
+          tagname: 'div',
+          template: _.template($('#cat-template').html()),
+
+          render: function() {
+            $(this.el).html(this.template(this.model.toJSON()));
+            return this;
+          }
+      })
+    </script>
+    <script type="text/javascript">
+
+      /*
+        You need to initialize Tabletop before you do aaaaanything.
+        You might think it'd be a good idea to put that into backbone.tabletopSync,
+          but IMHO the fact that you could put the key/url into any model anywhere
+          ever sounds like trouble.
+      */
+      $(document).ready( function() {
+        var cats = new CatCollection();
+        cats.fetch({ success: showInfo });
+      });
+      
+      function showInfo(cats) {
+        var bosco_view = new CatView({ model: cats.get('Bosco') });
+
+        $("#content").append( bosco_view.render().el );
+        
+        /*
+          Fetching on models works as long as you've specified a sheet
+          and an idAttribute for the Backbone.Model (you can always
+          use rowNumber, it comes baked in to Tabletop)
+        */
+        thomas = new Cat({name: 'Thomas'})
+        thomas.fetch();
+
+        var thomas_view = new CatView({ model: thomas });
+        $("#content").append( thomas_view.render().el );
+      }
+    
+      document.write("The published spreadsheet is located at <a target='_new' href='" + public_spreadsheet_url + "'>" + public_spreadsheet_url + "</a>");    
+    </script>
+  </body>
+</html>