Errata

The "id: movie.id," line should be removed to be consistent with the output from the curl call on the same page and to match the spirit of switching from "id" to "_key".

Note from the Author or Editor:
correct - the line with movie.id might be confusing.

this line in the example can be removed.

I wasn't quite sure how to classify this error because it has two facets.

When I first read the sentence "With a JavaScript promise, we abstract away the problems that uncertain runtimes for code execution bring.", the wording "uncertain runtimes" made it sound like the uncertainty of the Javascript engine it would be executing on, but this is not the case in this instance because we are talking about the server so the JavaScript engine is known. (The fact that my mind had to jump through that hurdle to understand the sentence suggests that a better choice of wording was needed.)

So, it must be interpreted as the length of the execution of the code is uncertain. Then I think it becomes a minor technical mistake as the promise isn't required due to uncertainty of the execution time of a piece of code, but due to the lack of any guarantee of the order in which the code may be executed without the promise. To be specific, if the execution time was known and certain, but the order of execution was not, the potential problem requiring the promise would still exist.

(By the way, I really like the book. I wouldn't be spending any time submitting these errata if I didn't think the book was great and worth putting effort into it to make it even better.)

Note from the Author or Editor:
Thanks, very good points. The style of this sentence got awry. Indeed, "runtime" has a double meaning here, which is confusing.

A promise is a mental bridge between "now" and the "future". The promise makes it easier to reason about code execution without knowing how long the code execution takes. This behaviour is similar to controlling code execution with "blocking" programming languages such as Java or Ruby. But by using JavaScript and promises, you obtain the advantages of both, parallel code execution of the JavaScript event loop and some means to control the order of code execution.

template: '<h1><a href='/movies/<%= id %>'><%= title %></a><hr></h1>'
makes browserify give a parse error.

Double quotes should be used around the value of href

template: '<h1><a href="/movies/<%= id %>"><%= title %></a><hr></h1>'

Note from the Author or Editor:
Right, the correct syntax would be:

'<h1><a href="/movies/<%= id %>"><%= title %></a><hr></h1>'

var data = require('../../movies.json');

should be

var data = require('../../../movies.json');

Note from the Author or Editor:
yes, this is correct:

var data = require('../../../movies.json');

There are two errors in this block of code:

var MoviesRouter = require('routers/movies');

should be

var MoviesRouter = Backbone.Router.extend({

and the first } after

initialize: function(options) {

should be removed.
The correct full output is

var MoviesRouter = Backbone.Router.extend({
routes: {
'movies/:id': 'selectMovie',
'': 'showMain'
},
selectMovie: function(id) {
this.moviesList.render();
this.movies.selectByID(id);
},
showMain: function() {
this.moviesList.render();
},
initialize: function(options) {
this.movies = movies;
this.moviesList = new MoviesList({
el: options.el,
collection: movies
});
}
});
module.exports = MoviesRouter;

Note from the Author or Editor:
Indeed, the correct output is:

var MoviesRouter = Backbone.Router.extend({
routes: {
'movies/:id': 'selectMovie',
'': 'showMain'
},
selectMovie: function(id) {
this.moviesList.render();
this.movies.selectByID(id);
},
showMain: function() {
this.moviesList.render();
},
initialize: function(options) {
this.movies = movies;
this.moviesList = new MoviesList({
el: options.el,
collection: movies
});
}
});
module.exports = MoviesRouter;

movies.resetSelected();

gives TypeError: undefined is not a function

It should be

app.movies.resetSelected();

Note from the Author or Editor:
Indeed, the correct form is app.movies.resetSelected()

At page 29 /page 47 in PDF) chapter “Preparing a Click Dummy” section. The example misses a .js extension.

The correct line should read:

$ browserify -r ./app/collections/movies.js:movies \
-r ./app/models/movie.js:movie > static/bundle.js


Currently the .js is missing from movies.js:movies:

$ browserify -r ./app/collections/movies:movies \
-r ./app/models/movie.js:movie > static/bundle.js

NOTE:
I'm reading this book on Safari Books Online so not sure what page number this
would be in the printed text

initialize function is missing 'options' parameter

Before:

initialize: function() {
this.movies = movies;
this.moviesList = new MoviesList({
el: options.el,
collection: movies
});
}

After:

initialize: function(options) {
this.movies = movies;
this.moviesList = new MoviesList({
el: options.el,
collection: movies
});
}

Note from the Author or Editor:
Confirmed, the examples are cleaned up at github. No editing needs right now.

The example for Firebase has changed in the meanwhile, the working example would be instead of:

$ npm install client-backfire --save-dev

to:


$ npm install client-firebase --save-dev

Then, the middle paragraph should become:

"Now, you can include the sync adapter for Firebase in the movies collection:

var Backbone = require('backbone');
Backbone.Firebase = require('./backbone_firebase');

"

And last, the last example code should become:

"

var Movies = Backbone.Firebase.Collection.extend({
model: Movie,
firebase: "https://movies-demo.firebaseio.com/movies",
// ... same as previously
});

"

The example lists the following code:


// views
var Movies = require('collections/movies');
var MoviesList = require('views/moviesList');

There is a line too much here, the "Movies = ...":

The right code should be

// views
var MoviesList = require('views/moviesList');

It is not stated anywhere that you have to change the following line:

this.listenTo (this.model, 'change: title', this.render);

for this:

this.listenTo (this.model, 'change', this.render);

in Movie View, to select and deselect work.

Note from the Author or Editor:
Before bundling and reloading the page, you should bind the changes in the 'select' attribute of the model to a movie view. So, you add the following attribute observer in app/views/movies.js:

initialize: function() {
...
// to observe changes in the selected attribute:
this.listenTo(this.model, 'change:selected', this.render);
}

Now you can bundle everything up and reload the page. As a result, you should be able to select movies from the moviesList view:

the left parenthesis in "/api(auth/session" should be a forward slash

Note from the Author or Editor:
correct, another typo

There should be a require for the MoviesRoutes in the file main.js

var MoviesRouter = require('routers/movies');

otherwise it fires a Reference Error.

Note from the Author or Editor:
Yes, it's better to have require('routers/movies') explicitly here

The "initialize: function()" line should be "initialize: function( options )"

Note from the Author or Editor:
Yes, this would indeed more consistent:

initiailize: function(options) {
}

The intendation also got slighty shifted too much.

Midnight in Paris should be quoted.

Note from the Author or Editor:
Indeed, the correct syntax should be:

> movie.set({"title": "Midnight in Paris"});