all da files
This commit is contained in:
		
							
								
								
									
										108
									
								
								node_modules/tabletop/examples/backbone/backbone.html
									
									
									
										generated
									
									
										vendored
									
									
										Executable file
									
								
							
							
						
						
									
										108
									
								
								node_modules/tabletop/examples/backbone/backbone.html
									
									
									
										generated
									
									
										vendored
									
									
										Executable file
									
								
							@@ -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>
 | 
			
		||||
							
								
								
									
										1290
									
								
								node_modules/tabletop/examples/backbone/backbone.js
									
									
									
										generated
									
									
										vendored
									
									
										Executable file
									
								
							
							
						
						
									
										1290
									
								
								node_modules/tabletop/examples/backbone/backbone.js
									
									
									
										generated
									
									
										vendored
									
									
										Executable file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										20
									
								
								node_modules/tabletop/examples/backbone/cats.css
									
									
									
										generated
									
									
										vendored
									
									
										Executable file
									
								
							
							
						
						
									
										20
									
								
								node_modules/tabletop/examples/backbone/cats.css
									
									
									
										generated
									
									
										vendored
									
									
										Executable file
									
								
							@@ -0,0 +1,20 @@
 | 
			
		||||
body {
 | 
			
		||||
  background: yellow;
 | 
			
		||||
  font-family: "Comic Sans MS";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.entry {
 | 
			
		||||
  float: left;
 | 
			
		||||
  width: 200px;
 | 
			
		||||
  border: solid black 3px;
 | 
			
		||||
  height: 250px;
 | 
			
		||||
  padding: 30px;
 | 
			
		||||
  margin: 30px;
 | 
			
		||||
  background: white;
 | 
			
		||||
}
 | 
			
		||||
h2 {
 | 
			
		||||
  font-size: 2em;
 | 
			
		||||
  color: black;
 | 
			
		||||
  text-transform: uppercase;
 | 
			
		||||
  text-shadow: 2px 2px 20px red;
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user