Saturday, 20 July 2013

backbone / node / restify

Models

Use Backbone.Model.extend to define a model. Specify properties to define behaviour. (http://backbonetutorials.com/what-is-a-model/)

  • initialize: - constructor. What to call when this model is instantiated
  • defaults: an object containing default values for properties associated with the model
  • validate: a function that accepts the array of attributes to update. If this function returns a string validation will fail.
  • xxx : function(...) - where xxx is a function. Any arbitrary function can be added to model (public)
  • set / get attributes, using method on instantiated model (can be set through construction)
  • 'id' attribute - used to reference key on object. makes choice between a POST (if missing) and a PUT if present
  • urlRoot attribute (the api root of the server)
  • .save() - a method that will commit data to db, response handle by object passed to 2nd arg ({success:fn(), })
  • .fetch() - a method that will retrieve data from server using GET
  • .destroy() - a method to delete data from server using DELETE
  • .toJSON() - a method to return all attributes of model
Bind events to attributes, by using the implicit 'on' member:
this.on("change:name", function(model){ 
  var name = model.get("name"); 
}); 
'change' by itself listens to all events of the model.

Watch for generic problems
this.bind("error", function (model, error) {
  alert(error);
});

Collections

An ordered set of Backbone models, defined using Backbone.Collection.extend. 

Assuming there is a Model defined [i.e. var Foo = Backbone.Model.extend({...}) ]
var coll = Backbone.Collection.extend({ model: Foo }); 
Then add instances of the model to the collection (can be done in the constructor, or using add method etc)
coll.add( new Foo() );

Views

Use Backbone.View.extend to define a view.
  • initialize: View constructor. Called on instantation of View.
  • 'el' property. The HTML element the view is bound to. Any events fired must be in this div. Can set with jQuery dom element selector {el: $('#foo') } etc.
  • events: a property that defines backbone events. The can only be attached to children of the specified 'el'.
Load templates using underscore and update the view:
initialize function(){
  var template = _.template( $("#search_template").html(), {} ); 
  this.$el.html( template ); 
} 

// bind events using the 'events' property of the view, reference 
events: { "click input[type=button]": "doSearch" }, 
doSearch: function( event ){ event.currentTarget alert( "Search for " + $("#search_input").val() ); }

Routers

Use Backbone.Router.extend to define a router. They are used to handle url routing / history. Routes interpret anything after the '#' in the URL e.g. (http://host.com/foo/#/my/location
  • routes: a property define any of the routes. These are matched in order
    • '*actions' matches anything after the # - these are called splats
    • '/foo/:id' will match this path, and pass variable 'id' to the function registered in .on('route:foo') - these are called params
    • '/foo/:param/*splat' can combine params and splats, though splats always go last as they match all
  • bookmarkable URLs, use Backbone.history.start();

Register route handlers with 'on' method
router.on('route:defaultRoute', function(actions) {});

Underscore.js

Supports basic HTML templates, with variable replacement
e.g. <div id="foo"><label><%= label_text %></label></div>
can be rendered by _.template( $("#foo").html(), {label_text : "My Label"});
Posted by at