-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a901745
commit 8acae6a
Showing
4 changed files
with
86 additions
and
26 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -133,7 +133,7 @@ Maturity in software (framework) development isn't simply about how long a frame | |
|
||
Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives that are helpful when building dynamic applications using JavaScript. It's not opinionated, meaning you have the freedom and flexibility to build the best experience for your web application how you see fit. You can either use the prescribed architecture it offers out of the box or extend it to meet your requirements. | ||
|
||
The library doesn't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. It also doesn't prescribe a specific template engine - while you are free to use the Micro-templating offered by Underscore.js (one of its dependencies), views can bind to HTML constructed using your templating solution of choice. | ||
The library doesn't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. Backbone also doesn't prescribe a specific template engine. While you are free to use the micro-templating offered by Underscore.js (Backbone's only hard dependency), views can bind to HTML constructed using your templating solution of choice. | ||
|
||
Looking at the [large](http://backbonejs.org/#examples) number of applications built with Backbone, it's clear that it scales well. Backbone also works quite well with other libraries, meaning you can embed Backbone widgets in an application written with AngularJS, use it with TypeScript, or just use an individual class (like Models) as a data backer for simpler apps. | ||
|
||
|
@@ -289,10 +289,12 @@ Our example will need a div element to which we can attach a list of Todo's. It | |
<div id="todo"> | ||
</div> | ||
<script type="text/template" id="item-template"> | ||
<div> | ||
<div class="view"> | ||
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> /> | ||
<%= title %> | ||
<label><%= title %></label> | ||
<button class="destroy"></button> | ||
</div> | ||
<input class="edit" value="<%= title %>"> | ||
</script> | ||
<script src="jquery.js"></script> | ||
<script src="underscore.js"></script> | ||
|
@@ -3920,6 +3922,24 @@ var Book = new mongoose.Schema({ | |
|
||
//Models | ||
var BookModel = mongoose.model( 'Book', Book ); | ||
|
||
// Configure server | ||
app.configure( function() { | ||
//parses request body and populates request.body | ||
app.use( express.bodyParser() ); | ||
|
||
//checks request.body for HTTP method overrides | ||
app.use( express.methodOverride() ); | ||
|
||
//perform route lookup based on url and HTTP method | ||
app.use( app.router ); | ||
|
||
//Where to serve static content | ||
app.use( express.static( path.join( application_root, 'site') ) ); | ||
|
||
//Show all errors in development | ||
app.use( express.errorHandler({ dumpExceptions: true, showStack: true })); | ||
}); | ||
``` | ||
|
||
As you can see, schema definitions are quite straight forward. They can be more advanced, but this will do for us. I also extracted a model (BookModel) from Mongo. This is what we will be working with. Next up, we define a GET operation for the REST API that will return all books: | ||
|
@@ -4604,17 +4624,17 @@ var Jeremy = new Person({ | |
|
||
// create the first view instance | ||
var zombieView = new ZombieView({ | ||
model: Person | ||
model: Jeremy | ||
}) | ||
zombieView.close(); // double-tap the zombie | ||
|
||
// create a second view instance, re-using | ||
// the same variable name to store it | ||
zombieView = new ZombieView({ | ||
model: Person | ||
model: Jeremy | ||
}) | ||
|
||
Person.set('email', '[email protected]'); | ||
Jeremy.set('email', '[email protected]'); | ||
``` | ||
|
||
Now we only see one alert box when this code runs. | ||
|
@@ -6781,7 +6801,7 @@ The main reason you'd want to configure RequireJS is to add shims, which we'll c | |
|
||
##### RequireJS Shims | ||
|
||
Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the `define` method to define the library as a module. However, some libraries - including Backbone and one of its dependencies, Underscore - don't do this. Fortunately RequireJS comes with a way to work around this. | ||
Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the `define` method to define the library as a module. While Backbone and Underscore have added AMD support in recent years, we're going to show an example of how to shim a library that does not using RequireJS. | ||
|
||
To demonstrate this, first let's shim Underscore, and then we'll shim Backbone too. Shims are very simple to implement: | ||
|
||
|
@@ -11569,7 +11589,7 @@ At the heart of our JavaScript MVC implementation is an `Event` system (object) | |
var Cranium = Cranium || {}; | ||
|
||
// Set DOM selection utility | ||
var $ = document.querySelector.bind(document) || this.jQuery || this.Zepto; | ||
var $ = this.jQuery || this.Zepto || document.querySelectorAll.bind(document); | ||
|
||
// Mix in to any object in order to provide it with custom events. | ||
var Events = Cranium.Events = { | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -162,7 +162,7 @@ Object-Oriented JavaScript | |
{\pard \ql \f0 \sa180 \li0 \fi0 Maturity in software (framework) development isn\u8217't simply about how long a framework has been around. It\u8217's about how solid the framework is and more importantly how well it\u8217's evolved to fill its role. Has it become more effective at solving common problems? Does it continue to improve as developers build larger and more complex applications with it?\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 Why Consider Backbone.js?\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives that are helpful when building dynamic applications using JavaScript. It\u8217's not opinionated, meaning you have the freedom and flexibility to build the best experience for your web application how you see fit. You can either use the prescribed architecture it offers out of the box or extend it to meet your requirements.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 The library doesn\u8217't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. It also doesn\u8217't prescribe a specific template engine - while you are free to use the Micro-templating offered by Underscore.js (one of its dependencies), views can bind to HTML constructed using your templating solution of choice.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 The library doesn\u8217't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. Backbone also doesn\u8217't prescribe a specific template engine. While you are free to use the micro-templating offered by Underscore.js (Backbone\u8217's only hard dependency), views can bind to HTML constructed using your templating solution of choice.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 Looking at the {\field{\*\fldinst{HYPERLINK "http://backbonejs.org/#examples"}}{\fldrslt{\ul | ||
large | ||
}}} | ||
|
@@ -285,10 +285,12 @@ History API | |
<div id="todo">\line | ||
</div>\line | ||
<script type="text/template" id="item-template">\line | ||
<div>\line | ||
<div class="view">\line | ||
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> />\line | ||
<%= title %>\line | ||
<label><%= title %></label>\line | ||
<button class="destroy"></button>\line | ||
</div>\line | ||
<input class="edit" value="<%= title %>">\line | ||
</script>\line | ||
<script src="jquery.js"></script>\line | ||
<script src="underscore.js"></script>\line | ||
|
@@ -3111,7 +3113,25 @@ var Book = new mongoose.Schema(\{\line | |
\});\line | ||
\line | ||
//Models\line | ||
var BookModel = mongoose.model( 'Book', Book );\par} | ||
var BookModel = mongoose.model( 'Book', Book );\line | ||
\line | ||
// Configure server\line | ||
app.configure( function() \{\line | ||
//parses request body and populates request.body\line | ||
app.use( express.bodyParser() );\line | ||
\line | ||
//checks request.body for HTTP method overrides\line | ||
app.use( express.methodOverride() );\line | ||
\line | ||
//perform route lookup based on url and HTTP method\line | ||
app.use( app.router );\line | ||
\line | ||
//Where to serve static content\line | ||
app.use( express.static( path.join( application_root, 'site') ) );\line | ||
\line | ||
//Show all errors in development\line | ||
app.use( express.errorHandler(\{ dumpExceptions: true, showStack: true \}));\line | ||
\});\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 As you can see, schema definitions are quite straight forward. They can be more advanced, but this will do for us. I also extracted a model (BookModel) from Mongo. This is what we will be working with. Next up, we define a GET operation for the REST API that will return all books:\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 //Get a list of all books\line | ||
app.get( '/api/books', function( request, response ) \{\line | ||
|
@@ -3610,17 +3630,17 @@ Managing Events As Relationships, Not Just Resources | |
\line | ||
// create the first view instance\line | ||
var zombieView = new ZombieView(\{\line | ||
model: Person\line | ||
model: Jeremy\line | ||
\})\line | ||
zombieView.close(); // double-tap the zombie\line | ||
\line | ||
// create a second view instance, re-using\line | ||
// the same variable name to store it\line | ||
zombieView = new ZombieView(\{\line | ||
model: Person\line | ||
model: Jeremy\line | ||
\})\line | ||
\line | ||
Person.set('email', '[email protected]');\par} | ||
Jeremy.set('email', '[email protected]');\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 Now we only see one alert box when this code runs.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 Rather than having to manually remove these event handlers, though, we can let Marionette do it for us.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 var ZombieView = Marionette.ItemView.extend(\{\line | ||
|
@@ -5322,7 +5342,7 @@ RequireJS documentation | |
}}} | ||
.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs20 RequireJS Shims\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the {\f1 define} method to define the library as a module. However, some libraries - including Backbone and one of its dependencies, Underscore - don\u8217't do this. Fortunately RequireJS comes with a way to work around this.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the {\f1 define} method to define the library as a module. While Backbone and Underscore have added AMD support in recent years, we\u8217're going to show an example of how to shim a library that does not using RequireJS.\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 To demonstrate this, first let\u8217's shim Underscore, and then we\u8217'll shim Backbone too. Shims are very simple to implement:\par} | ||
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 require.config(\{\line | ||
shim: \{\line | ||
|
@@ -9141,7 +9161,7 @@ Underscore | |
var Cranium = Cranium || \{\};\line | ||
\line | ||
// Set DOM selection utility\line | ||
var $ = document.querySelector.bind(document) || this.jQuery || this.Zepto;\line | ||
var $ = this.jQuery || this.Zepto || document.querySelectorAll.bind(document);\line | ||
\line | ||
// Mix in to any object in order to provide it with custom events.\line | ||
var Events = Cranium.Events = \{\line | ||
|
Oops, something went wrong.