Skip to content

Instantly share code, notes, and snippets.

@jridgewell
Last active February 4, 2018 23:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jridgewell/da4670629574ee5858fa to your computer and use it in GitHub Desktop.
Save jridgewell/da4670629574ee5858fa to your computer and use it in GitHub Desktop.
Backbone + Incremental DOM
var Box = Backbone.Model.extend({
defaults: {
top: 0,
left: 0,
color: 0,
content: 0
},
initialize: function() {
this.count = 0;
},
tick: function() {
var count = this.count += 1;
this.set({
top: Math.sin(count / 10) * 10,
left: Math.cos(count / 10) * 10,
color: (count) % 255,
content: count % 100
});
}
});
var BoxView = Backbone.View.extend({
className: 'box-view',
template: function(data) {
IncrementalDOM.elementOpen('div', null, null, 'class', 'box', 'id', 'box-' + data.number, 'style', {
top: data.top + 'px',
left: data.left + 'px',
background: 'rgb(0,0,' + data.color + ')'
});
IncrementalDOM.text(data.content);
IncrementalDOM.elementClose('div');
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
IncrementalDOM.patch(this.el, this.template, this.model.attributes);
return this;
}
});
@p1nox
Copy link

p1nox commented Mar 18, 2016

Nice implementation @jridgewell 👍

Any other suggestion while working with Backbone since your last update here? (I also read your comments in jashkenas/backbone#3772).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment