backbone.js Flashcards
Backbone Views are more like…
Controllers in traditional MVC
What is a SPA?
Single Page Application
What are routers responsible for?
Used in SPA’s - it responds to changes in the URL to update the page.
What is a model?
Container for application data
Modernizr.js is required to be where in the main HTML file?
The header. (I presume some dependency issues).
Models contain the….
data and logic
How do you declare a Model?
var Song = Backbone.Model.extend({ // config object });
What does the initialize member of the config object in the model do?
Calls a method that initializes the object - a bit like a constructor.
How do you inspect an object in the chrome console?
Just type its name at the prompt.
How do models store attributes?
In a hash
How do you add an attribute?
Call the set method (or pass a JSON object to the constructor).
How do you get an attribute?
Call the ‘get’ method on the model, passing the name of the attribute.
How do you delete an attribute?
Call the ‘unset’ method on model, passing the name of the attribute.
How do you remove all attributes of a model at once?
Call the ‘clear’ method on the model.
How can I query a model whether it has an attribute?
use the ‘has’ method on the model object.
How would I set defaults on a model?
When creating the model, set the field ‘defaults’ with a json object containing the default objects.
var Song = Backbone.Model.extend({
defaults: {
superman: "yes",
superwoman: "no"
}
});
How do we implement Model validation?
Add a ‘validate’ function to the Model upon creation.
var Song = Backbone.Model.extend({
validate: function(attrs) {
if (!attrs.title) {
return "Title is required.";
}
}
});
The validate function is run over the attributes when they are set.
What does Backbone expect the return value of the validate function to be?
It should return a string explaining the error.
How do we determine if a model is valid (assuming we’ve done some validation)?
call the isValid method on the object.
song.isValid();
If the model is not valid - how can we determine what the error is?
The attribute (not method!) of the model object can be checked to see what the error messages are.
song.validationError
How do you perform inheritance using Backbone?
Once you have an object - you call 'extend()' on it to create a new constructor function.
var Animal = Backbone.Model.extend({
walk: function() { console.log("Animal walking..."); }
});
var Dog = Animal.extend(); var dog = new Dog(); dog.walk();
How would you override a function in a model?
var Animal = Backbone.Model.extend({
walk: function() {
console.log("Animal walking...");
}
});
var Dog = Animal.extend({
walk: function() {
console.log("Dog walking...");
}
});
How would you call the parent function of a method?
var Dog = Animal.extend({
walk: function() {
Animal.prototype.walk.apply(this);
console.log("Dog walking..."); } });
How does backbones model method map to HTTP verbs?
fetch() - GET
save() - PUT / POST
destroy() - DELETE
How do you define the end point for a Backbone model?
The urlRoot attribute of a model defines the API endpoint.
var Song = Backbone.Model.extend({
urlRoot: "/api/foobar/",
});
If we setup a fetch like this - what does the HTTP request look like (given urlRoot is “/api/songs” ) ?
var song = new Song({ id: 1 });
song.fetch();
GET /api/songs/1
Given the following statements, what does the HTTP request look like for this set of commands (assuming urlRoot of “/api/songs”)?
var song = new Song({ id: 1 });
song.fetch();
....
song.set("title", "Super fuck");
song.save();
PUT /api/songs/1
… HTTP body will contain data.
Given the following statements, what does the HTTP request look like for this set of commands (assuming urlRoot of “/api/songs”)?
var song = new Song();
song. set(“title”, “Title”);
song. save();
POST /api/songs/1
…HTTP body will contain the data.
Given the following statements, what does the HTTP request look like for this set of commands (assuming urlRoot of “/api/songs”)?
var song = new Song({ id: 1 });
song.delete();
DELETE /api/songs/1
What do you do if your database doesn’t use the attribute id to identify the object that you are loading?
You can set the actual attribute using the idAttribute field on the object.
var Song = new Backbone.Model.extend({
idAttribute: "songId"
});
var song = new Song({ songId: 1 });
Are the fetch / save/ delete methods synchronous or asynchronous?
Asynchronous.
What callbacks do the fetch and destroy methods accept?
success
error
var song = new Song();
song.fetch({
success: function() {},
error: function() {}
});
What is the difference between the way the success/error callbacks work with fetch / delete and save?
In save the callbacks are wrapped in an object that is the SECOND argument to the method.
var song = new Song();
song.save({.....}, {
success: function() {},
error: function() {}
});
The first argument is a hash of the attributes you would like to change.
If you have done the following - how do you call the save method with success / error callbacks?
var song = new Song();
song.set("title", "Title");
song.save({}, {
success: function() {},
error: function() {}
});
// NOTE that the first field must be supplied, even if it is empty!!!!
