backbone.html | searchcode

/static/js/vendor/jsoma-tabletop-32ee2bb/examples/backbone/backbone.html

https://bitbucket.org/bloodearnest/gateway-website
HTML | 108 lines | 93 code | 15 blank | 0 comment | 0 complexity | fe7b4b66236fb1755247c178a9904e86 MD5 | raw file

<!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>