Skip to content

Instantly share code, notes, and snippets.

@p1nox
Forked from jridgewell/Box.js
Created March 18, 2016 13:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save p1nox/325fb7bdf5d476bf2b39 to your computer and use it in GitHub Desktop.
Save p1nox/325fb7bdf5d476bf2b39 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;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment