public
Last active

Minimal example of data handling in Backbone.js

  • Download Gist
backbone-tutorial.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
/* Scaled-down Backbone.js demonstration
* By Jacob Oscarson (http://twitter.com/jacob414), 2010
* MIT Licenced, see http://www.opensource.org/licenses/mit-license.php */
$(function() {
window.ulog = function(msg) { $('#log').append($('<div>'+msg+'</div>')); }
 
// Faking a little bit of Backbone.sync functionallity
Backbone.sync = function(method, model, succeeded) {
ulog('<strong>'+method + ":</strong> " + model.get('label'));
if(typeof model.cid != 'undefined') {
// It's a freshly made model
var cid = model.cid;
// ..fake that it's .cid turns into a "real" .id:
model.unset('cid').set({id:cid}, {silent:true});
}
// Oh yes, it all went sooo well ;-)
succeeded(model);
};
 
// Models represent your data
Model = Backbone.Model.extend();
 
// Collections represent a list of models (typically a query on a server)
Models = Backbone.Collection.extend({model:Model});
 
// Create a 'Models' instance, and give it a dataset we can play with
models = new Models([ {id: 'm1', label:'Item 1'},
{id: 'm2', label:'Item 2'} ]);
 
// Views represent what should be visible
View = Backbone.View.extend({
render: function() {
// Redraw - notice that we don't know if this.el is inserted
// in the DOM or not
$(this.el).html(
_.template('<input type="text" value="<%= label %>" />',
this.model.toJSON()));
// Returning this.el instead could also be a good idea..
return this;
},
events: {
'change input': 'change'
},
change: function() {
var newval = this.$('input').val();
ulog('<em>Changing '+this.model.get('label')+' to '+newval+"</em>");
this.model.set({label:newval});
}
});
 
 
// Create view instances for every model
views = models.map(function(model) {
var view = new View({model: model});
$('#content').append(view.render().el);
return view;
});
 
$('#save').click(function() {
// This doesn't feel completely right..
models.each(function(model) { model.save(); });
});
 
$('#add').click(function() {
var model = models.create({label:'New item'});
var view = new View({model:model});
$('#content').append(view.render().el);
});
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.