BT OSMOSOFT 2013
BT OSMOSOFT 2013
BT OSMOSOFT 2013
BT OSMOSOFT 2013
BT OSMOSOFT 2013
BT OSMOSOFT 2013
BT OSMOSOFT 2013
var Tiddler = Backbone.Model.extend({ urlRoot: '/bags/tiddlyspace/tiddlers', idAttribute: 'title', defaults: { 'title': 'New Tiddler', 'text': '', 'tags': [], 'fields': {} } });
var tiddler = new Tiddler({ title: "Backbone JS" }):
tiddler.fetch({ success: function () { //Do something with the loaded model } });
BT OSMOSOFT 2013
var Bag = Backbone.Collection.extend({ model: Tiddler, url: '/bags/tiddlyspace/tiddlers' });
var bag = new Bag();
bag.fetch({ success: function () { //Do something with collection of models } });
bag.get("Backbone JS"); //Returns the "Backbone JS" model
bag.create({ title: "Require JS" }); //Create & add new model
BT OSMOSOFT 2013
var ListItemView = Backbone.View.extend({ tagName: 'li', template: _.template(listItemTemplate) render: function () { $(this.el).html(this.template(this.model.toJSON())); return this; } });
var listItemView = new ListItemView({ model: tiddler });
listItem.view.render().el //Returns the list item DOM snippet
BT OSMOSOFT 2013
var TiddlersListView = Backbone.View.extend({ tagName: 'ul', render: function () { _.each(this.collection.models, function (tiddler) { $(this.el).append( new ListItemView({ model: tiddler }).render().el ); }, this); return this; } });
var listView = new TiddlersListView({ collection: bag });
BT OSMOSOFT 2013
var TiddlerEditView = Backbone.View.extend({ events: { 'click .submit-button': 'saveTiddler' }, saveTiddler: function () { this.model.set({ title: $('#tiddler-title').val(), text: $('#tiddler-content').val(), tags: $('#tiddler-tags').val().split(',') }); this.model.save(); return false; }, });
BT OSMOSOFT 2013
var AppRouter = Backbone.Router.extend({ routes:{ 'home': 'home', 'tiddler/:title': 'getTiddler', 'tiddlers': 'getTiddlers', 'newTiddler': 'newTiddler' }, getTiddler: function (title) { //Load tiddler by title //Create view and render }
app/#tiddler/NewTiddler -> getTiddler("NewTiddler")
BT OSMOSOFT 2013
BT OSMOSOFT 2013
BT OSMOSOFT 2013