11:4232194a24ca
Anton Shestakov <engored@ya.ru>, Fri, 14 Dec 2012 23:54:33 +0900
Changes for Backbone 0.9.9: Shards now also proxy Underscore method name aliases.

next change 13:32f98d0cd21b
previous change 7:6a4073144143

demo.html

Permissions: -rw-r--r--

Other formats: Feeds:
<!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>