Download:
Patch
child 8:dd50fe10144c
parent 6:96431dd2a6a3
7:6a4073144143
Anton Shestakov <engored@ya.ru>, Wed, 12 Dec 2012 19:09:41 +0900
Demo page (currently demonstrating event propagation issues in shard).
2 файлов изменено, 82 вставок(+), 2 удалений(-) [+]
demo.html file | annotate | diff | comparison | revisions
test/index.html file | annotate | diff | comparison | revisions 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/demo.html	Wed Dec 12 19:09:41 2012 +0900
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Shard Demo</title>
+    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+    
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></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(options) {
+          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'); } });
+      
+      new CollectionView({
+        el: $('#collection'),
+        collection: col
+      });
+      
+      new CollectionView({
+        el: $('#subset-unread'),
+        collection: shardUnread
+      });
+      
+      new CollectionView({
+        el: $('#subset-read'),
+        collection: shardRead
+      });
+    </script>
+  </body>
+</html>
--- a/test/index.html	Wed Dec 12 03:40:40 2012 +0900
+++ b/test/index.html	Wed Dec 12 19:09:41 2012 +0900
@@ -15,7 +15,5 @@
   </head>
   <body>
     <div id="qunit"></div>
-    <script>
-    </script>
   </body>
 </html>