| z, ? | toggle help (this) |
| space, → | next slide |
| shift-space, ← | previous slide |
| d | toggle debug mode |
| ## <ret> | go to slide # |
| c, t | table of contents (vi) |
| f | toggle footer |
| r | reload slides |
| n | toggle notes |
| p | run preshow |
var paper = Raphael('raphael-circle')
paper.circle(500,50,30);var paper = Raphael('raphael-circle-event')
var circle = paper.circle(500,50,30);
circle.attr({fill: 'white'});
$(circle.node).bind('click', function() {
circle.attr({fill: 'red'});
});var m = new Backbone.Model({
value: 10
});
m.on('change:value', function(m) {
alert(m.get('value'));
});
m.set({value: 20});var m = new Backbone.Model({value: 10});
var v = new (Backbone.View.extend({
initialize: function() {
this.model.on('change', this.render, this);
},
render: function() {
this.$el.html(this.model.get('value'));
return this;
}
}))({model: m});
$('#backbone-view-binding').append(v.render().el);
setTimeout(function() {m.set({value: 20})}, 1000);render: function() {
if (this.raphEl) this.raphEl.remove();
this.paper = this.paper || Raphael(this.el);
this.raphEl = this.paper.circle(
25, 25, this.model.get('value')
);
return this;
}var collection = new Backbone.Collection({
{value: 10},
{value: 20}
});
collection.each(function(model) {
var view = new ModelView({model: model});
$('body').append(view.render().el);
});function Particle(mass) {
// redacted
_.extend(this, Backbone.Events);
}RungeKuttaIntegrator.prototype.step = function (deltaT) {
/* lots of physics stuff redacted */
p.trigger('change'); // p is the particle
}Node = Backbone.Model.extend({
initialize: function(attributes) {
// when the particle changes, we fire a change
this.get('particle').on('change', function() {
this.trigger('change');
}, this);
this.children = new NodeList();
},
// proxy some particle attributes
x: function() { return this.get('particle').position.x; },
y: function() { return this.get('particle').position.y; },
});createChild: function() {
var mass = 0.4;
var x = this.x() + Math.random() * 50 - 25;
var y = this.y() + Math.random() * 50 - 25;
var particle = traer.makeParticle(mass, x, y, 0);
var node = new Node({particle: particle, size: 10});
this.children.add(node);
var spring = 0.02;
var damping = 0.10;
var length = 120;
traer.makeSpring(
this.particle(), node.particle(),
spring, damping, length
);
// cont
},// cont
this.trigger('child', node);
node.on('child', this.link, this);
node.on('child', function(child) {
this.trigger('child', child);
}, this);