Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Minimal example of data handling in Backbone.js

View backbone-tutorial.js
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);
});
});

Part of this tutorial.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.