demo.html at 46f343bd26af · backbone-shard

37:46f343bd26af default tip
Anton Shestakov <av6@dwimlabs.net>, Thu, 05 Jul 2018 22:55:53 +0800
demo: jQuery 3.3.1
previous change
36:f379057aae55
demo.html

Permissions: -rw-r--r--
File Latest Revisions Annotate Diff Comparison
Other formats:
JSON Raw
Feeds:
Atom RSS
<!DOCTYPE html>
<html>
  <head>
    <title>Shard Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" integrity="sha384-MY3lqAyZWEjvYefTFTBYUN85pnmwAxdSjsX+8IqCP1N5VBzOIX6GNo1rUt9gz74C" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha384-5DWzr9S4agqS3WKvPrhFKJagpYyHOBsf3/DxuDKORyqCv2sYer9c/ExdhPOL8CGh" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js" integrity="sha384-NNt9ocJfZhIg2c5PbM5G2a3tTaeXhEfqCHWHNB7htzaWKn8MwFkzVyGdzLA8QMX7" crossorigin="anonymous"></script>
    <script src="backbone.shard.js"></script>
  </head>
  <body>
    <div class="row-fluid">
      <div class="span3 offset5">
        <h3>Books</h3>
        <div id="collection"></div>
      </div>
    </div>
    <div class="row-fluid">
      <div class="span3 offset3">
        <h3>Read</h3>
        <div id="subset-read" class="centered"></div>
      </div>
      <div class="span3 offset1">
        <h3>Unread</h3>
        <div id="subset-unread" class="centered"></div>
      </div>
    </div>
    <script>
      var Book = Backbone.Model;
      var col = new Backbone.Collection([
        new Book({title: 'Crime and Punishment', read: true}),
        new Book({title: 'Robinson Crusoe', read: true}),
        new Book({title: 'Moby Dick', read: false}),
        new Book({title: 'The Catcher in the Rye', read: false})
      ]);
      var CollectionView = Backbone.View.extend({
        initialize: function() {
          this.collection.on('add change remove reset', this.render, this);
          this.render();
        },
        render: function() {
          this.$el.empty();
          this.collection.each(this.appendItem, this);
        },
        appendItem: function(item) {
          var $cb = $('<input>').attr('type', 'checkbox').prop('checked', item.get('read'));
          var $label = $('<label>').addClass('checkbox').text(item.get('title')).prepend($cb);
          this.$el.append($label);
          $cb.change(function() {
            item.set('read', this.checked);
          });
        }
      });
      var shardRead = new Backbone.Shard({collection: col, filter: function(book) { return book.get('read'); } });
      var shardUnread = new Backbone.Shard({collection: col, filter: function(book) { return !book.get('read'); } });
      /* jshint nonew: false */
      new CollectionView({
        el: $('#collection'),
        collection: col
      });
      new CollectionView({
        el: $('#subset-unread'),
        collection: shardUnread
      });
      new CollectionView({
        el: $('#subset-read'),
        collection: shardRead
      });
    </script>
  </body>
</html>