Updated pedagogy and fixed the README.

This commit is contained in:
Elf M. Sternberg 2016-04-18 07:20:24 -07:00
parent fc2c77b56d
commit 82af8f6a44
3 changed files with 35 additions and 29 deletions

View File

@ -1,7 +1,7 @@
# About # About
The Backbone Store is a tutorial and demonstration application for the The Backbone Store is a tutorial and demonstration application for
BackboneJS framework. BackboneJS, a javascript framework for managing data-driven websites.
## Installation ## Installation
@ -11,7 +11,7 @@ $ make setup all serve
This will automatically run the NPM and Bower install scripts, placing This will automatically run the NPM and Bower install scripts, placing
the correct libraries into the target tree, build the actual application the correct libraries into the target tree, build the actual application
from the original source material, and start a server. from the original source material, and start a local server.
## Requirements ## Requirements

Binary file not shown.

View File

@ -70,7 +70,7 @@ To demonstrate the basics of Backbone, I'm going to create a simple
one-page application, a store for record albums, with two unique views: one-page application, a store for record albums, with two unique views:
a list of all products and a product detail view. I will also put a a list of all products and a product detail view. I will also put a
shopping cart widget on the page that shows the user how many products shopping cart widget on the page that shows the user how many products
he or she has dropped into the cart. I'll use some simple animations to have been has dropped into the cart. I'll use some simple animations to
transition between the catalog and the product detail pages. transition between the catalog and the product detail pages.
\subsection{Models, Collections, and Controllers} \subsection{Models, Collections, and Controllers}
@ -78,20 +78,22 @@ transition between the catalog and the product detail pages.
Backbone's data layer provides two classes, [[Collection]] and Backbone's data layer provides two classes, [[Collection]] and
[[Model]]. [[Model]].
Every web application has data, often tabular data. Full-stack web Every web application has data, often tabular data. Addressing tabular
developers are (or ought to be) familiar with the \textit{triples} of data usually involves three parts: The \textit{table}, \textit{row}, and
addressing objects on the web: Table URL → Row → Field, or Page URL → \textit{column}. In Backbone, these are represented by the
HTML Node → Content. The [[Collection]] object represents just that: a [[Collection]], the [[Model]], and the [[attribute]]. The
collection of similar items. The [[Model]] represents exactly one of [[Collection]] often has a URL indicating the back-end source of the
those items. table; the [[Model]] may have a URL indicating its specific row in the
table, as a way of efficiently saving itserlf back to the table.
To use the Model, you inherit from it using Backbone's own [[.extend()]] To use the Model, you inherit from it using Backbone's own [[.extend()]]
class method, adding or replacing methods in the child object as class method, adding or replacing methods in the child object as needed.
needed. For our purposes, we have two models: [[Product]] represents For our purposes, we have two models: [[Product]] represents something
something we wish to sell, and [[Item]] represents something currently we wish to sell, and [[Item]] represents something currently in the
in the customer's shopping cart. customer's shopping cart.
The Product literally has nothing to modify. The Product literally has nothing to modify. It already provides all
the methods we need.
Shopping carts are a little odd; the convention is that [[Item]] is not a Shopping carts are a little odd; the convention is that [[Item]] is not a
single instance of the product, but instead has a reference to the single instance of the product, but instead has a reference to the
@ -123,15 +125,17 @@ var Item = Backbone.Model.extend({
The methods [[.get(item)]] and [[.set(item, value)]] are at the heart of The methods [[.get(item)]] and [[.set(item, value)]] are at the heart of
Backbone.Model. They're how you set individual attributes on the object Backbone.Model. They're how you set individual attributes on the object
being manipulated. Notice how I can 'get' the product, which is a being manipulated. Notice how I can 'get' the product, which is a
Backbone.Model, and then 'get' its price. Backbone.Model, and then 'get' its price. This is called a
\textit{chain}, and is fairly common in Javascript.
Backbone supplies its own event management toolkit. Changing a model The big secret to Backbone is that it supplies an advanced event
triggers various events, none of which matter here in this context so I management toolkit. Changing a model triggers various events, none of
silence the event, but then I tell the Item's Backbone.Collection that which matter here in this context so I silence the event, but then I
the Model has changed. For this program, it is the collection as a tell the Item's Backbone.Collection that the Model has changed. For
whole whose value matters, because that collection as a whole represents this program, it is the collection as a whole whose value matters,
our shopping cart. Events are the primary way in which Backbone objects because that collection as a whole represents our shopping cart. Events
interact, so understanding them is key to using Backbone correctly. are the primary way in which Backbone objects interact, so understanding
them is key to using Backbone correctly.
Collections, like Models, are just objects you can (and often must) Collections, like Models, are just objects you can (and often must)
extend to support your application's needs. Just as a Model has extend to support your application's needs. Just as a Model has
@ -145,7 +149,11 @@ method is a simple JSON object representing either a Model's attributes,
or a JSON list of the Collection's models' attributes. or a JSON list of the Collection's models' attributes.
The [[Product.Collection]] will be loading its list of albums via these The [[Product.Collection]] will be loading its list of albums via these
methods to (in our case) static JSON back-end. methods to (in our case) static JSON back-end. Backbone provides a
mechanism for fetching JSON (and you can override the [[.parse()]]
method to handle XML, CSV, or whatever strikes your fancy); to use the
default [[.fetch()]] method, capture and set the Collection's [[.url]]
field:
<<product collection>>= <<product collection>>=
var ProductCollection = Backbone.Collection.extend({ var ProductCollection = Backbone.Collection.extend({
@ -154,8 +162,8 @@ var ProductCollection = Backbone.Collection.extend({
this.url = options.url; this.url = options.url;
}, },
comparator: function(item) { comparator: function(product) {
return item.get('title'); return product.get('title');
} }
}); });
@ -164,7 +172,7 @@ var ProductCollection = Backbone.Collection.extend({
The [[.model]] attribute tells the [[ProductCollection]] that if The [[.model]] attribute tells the [[ProductCollection]] that if
[[.add()]] or [[.fetch()]] are called and the contents are plain JSON, [[.add()]] or [[.fetch()]] are called and the contents are plain JSON,
a new [[Product]] Model should be initialized with the JSON data and a new [[Product]] Model should be initialized with the JSON data and
that will be used as a new object for the Collection. that will be used as a new object for the Collection.
The [[.comparator()]] method specifies the per-model value by which the The [[.comparator()]] method specifies the per-model value by which the
Collection should be sorted. Sorting happens automatically whenever the Collection should be sorted. Sorting happens automatically whenever the
@ -186,7 +194,6 @@ Model above, it will automatically be created as a Model in the
Collection at the end of this call. In either case, we return the new Collection at the end of this call. In either case, we return the new
Item to be handled further by the calling code. Item to be handled further by the calling code.
<<cart collection>>= <<cart collection>>=
var ItemCollection = Backbone.Collection.extend({ var ItemCollection = Backbone.Collection.extend({
model: Item, model: Item,
@ -234,7 +241,6 @@ next as the memo.
@ @
\subsection {Views} \subsection {Views}
Backbone Views are simple policy objects. They have a root DOM Backbone Views are simple policy objects. They have a root DOM