Permalink
Browse files

Finish refactoring

  • Loading branch information...
1 parent a318902 commit 02542d3eaeb0cb7345b32a2d124499a1feacf74b @rstacruz committed Dec 28, 2015
Showing with 113 additions and 126 deletions.
  1. +33 −115 README.md
  2. +16 −11 docs/README.md
  3. +47 −0 docs/document-ready-abuse.md
  4. +14 −0 docs/event-handlers-outside-views.md
  5. 0 docs/other-links.md
  6. +3 −0 docs/things-outside-views.md
View
@@ -1,133 +1,51 @@
-# Backbone patterns
+# Backbone<br>Patterns
-<!-- {h1:.massive-heading.-with-tagline} -->
+<!-- {.massive-header.-with-tagline} -->
> Building apps with Backbone.js
Here, I try to document the good practices that our team has learned along the
-way building [Backbone][bb] applications.
+way building [Backbone][bb] applications. This document assumes that you already
+have some knowledge of [Backbone.js][bb], [jQuery][jq], and of course,
+JavaScript itself.
-### Assumptions
-
-This document assumes that you already have some knowledge of [Backbone.js][bb],
-[jQuery][jq], and of course, JavaScript itself.
-
-[rsc]: http://ricostacruz.com/
[bb]: http://documentcloud.github.com/backbone/
[jq]: http://jquery.com/
-Anti-patterns
-=============
-
-Here are a few common practices that I believe should generally be avoided.
-
-$() abuse
----------
-
-jQuery allows you to defer execution of code until when the DOM is fully-loaded
-with [$(document).ready(...)][jquery.ready], or its short form, `$(...)`. This
-is useful for getting everything set up once your HTML document is ready.
-
-[jquery.ready]: http://api.jquery.com/ready/
-
-``` javascript
-$(document).ready(function() {
- // Initialize the router.
- App.router = new App.MainRouter;
-
- // Initialize the main view.
- App.dashboard = new App.Dashboard({ ... });
-
- // and so on...
-});
-
-// Or its shorter form:
-$(function() {
- // ...
-});
-```
-
-A common anti-pattern is to put class definitions (for views, models, and such)
-inside these blocks. They are not necessary.
-
-``` javascript
-// AVOID this:
-$(function() {
- App.PhotoView = Backbone.View.extend({
- ...
- });
-});
-```
-
-Your classes should be ready before the HTML DOM is. This will save you from
-running into problems later where certain classes may not be available at
-certain parts of your application.
-
-``` javascript
-// Consider instead:
-App.PhotoView = Backbone.View.extend({
- ...
-});
-```
-
-Things outside views
---------------------
-
-Put things in your view class code as much as possible.
-
-Event handlers outside views
-----------------------------
-
-Every time you make an event handler outside a view class, consider making a new
-view class.
-
-``` javascript
-App.PhotoView = Backbone.View.extend({
- ...
-});
-
-// AVOID this!
-$("a.photo").click(function() { ... });
-```
-
-Other links
-===========
-
-Other links of interest:
-
-* [Backbone][backbone] official documentation
-* [Backbonetutorials.com][bbtutorials] by Thomas Davis covers the basics of
- Backbone.js in more detail than the official docs.
-* [Backbone Fundamentals][bbfund] by Addy Osmani is a Creative Commons book for
- beginners and advanced users alike.
-
-[backbone]: http://documentcloud.github.com/backbone/
-[bbtutorials]: http://backbonetutorials.com
-[bbfund]: https://github.com/addyosmani/backbone-fundamentals
-
-Acknowledgements
-================
-
-© 2011-2012, Rico Sta. Cruz. Released under the [MIT
+## Table of contents
+
+* Model patterns
+ * [Bootstrapping data](docs/bootstrapping-data.md)
+* View patterns
+ * [Inline templates](docs/inline-templates.md)
+ * [JST templates](docs/jst-templates.md)
+ * [Partials](docs/partials.md)
+ * [Animation buffer](docs/animation-buffer.md)
+ * [Sub-views](docs/subviews.md)
+ * [Delegate views](docs/delegate-views.md)
+* General patterns
+ * [Mixins](docs/mixins.md)
+* Conventions
+ * [Naming convention](docs/naming-convention.md)
+ * [Namespace convention](docs/namespace-convention.md)
+ * [RequireJS and AMD](docs/requirejs-and-amd.md)
+* Anti-patterns
+ * [document.ready abuse](docs/document-ready-abuse.md)
+ * [Things outside views](docs/things-outside-views.md)
+ * [Event handlers outside views](docs/event-handlers-outside-views.md)
+* [Other links](docs/other-links.md)
+
+## Thanks
+
+© 2011-2016, Rico Sta. Cruz. Released under the [MIT
License](http://www.opensource.org/licenses/mit-license.php).
This document is authored and maintained by [Rico Sta. Cruz][rsc] with help from
-its [contributors][c]. It is sponsored by my startup, [Sinefunc, Inc][sf].
+its [contributors][c].
* [My website](http://ricostacruz.com) (ricostacruz.com)
- * [Sinefunc, Inc.](http://sinefunc.com) (sinefunc.com)
* [Github](http://github.com/rstacruz) (@rstacruz)
* [Twitter](http://twitter.com/rstacruz) (@rstacruz)
[rsc]: http://ricostacruz.com
-[c]: http://github.com/rstacruz/backbone-patterns/contributors
-[sf]: http://sinefunc.com
-
-### To do list
-
- - Model associations
- - Adding events to subclasses
- - View modes
- - Nested views
- - Router entry/exit
- - View helpers
+[c]: http://github.com/rstacruz/backbone-patterns/contributors
View
@@ -2,17 +2,22 @@
* [Backbone Patterns](../README.md)
* Model patterns
- * [Bootstrapping data](bootstrapping-data.md)
+ * [Bootstrapping data](/docs/bootstrapping-data.md)
* View patterns
- * [Inline templates](inline-templates.md)
- * [JST templates](jst-templates.md)
- * [Partials](partials.md)
- * [Animation buffer](animation-buffer.md)
- * [Sub-views](subviews.md)
- * [Delegate views](delegate-views.md)
+ * [Inline templates](/docs/inline-templates.md)
+ * [JST templates](/docs/jst-templates.md)
+ * [Partials](/docs/partials.md)
+ * [Animation buffer](/docs/animation-buffer.md)
+ * [Sub-views](/docs/subviews.md)
+ * [Delegate views](/docs/delegate-views.md)
* General patterns
- * [Mixins](mixins.md)
+ * [Mixins](/docs/mixins.md)
* Conventions
- * [Naming convention](naming-convention.md)
- * [Namespace convention](namespace-convention.md)
- * [RequireJS and AMD](requirejs-and-amd.md)
+ * [Naming convention](/docs/naming-convention.md)
+ * [Namespace convention](/docs/namespace-convention.md)
+ * [RequireJS and AMD](/docs/requirejs-and-amd.md)
+* Anti-patterns
+ * [document.ready abuse](/docs/document-ready-abuse.md)
+ * [Things outside views](/docs/things-outside-views.md)
+ * [Event handlers outside views](/docs/event-handlers-outside-views.md)
+* [Other links](/docs/other-links.md)
@@ -0,0 +1,47 @@
+# document.ready abuse
+
+jQuery allows you to defer execution of code until when the DOM is fully-loaded
+with [$(document).ready(...)][jquery.ready], or its short form, `$(...)`. This
+is useful for getting everything set up once your HTML document is ready.
+
+[jquery.ready]: http://api.jquery.com/ready/
+
+``` javascript
+$(document).ready(function() {
+ // Initialize the router.
+ App.router = new App.MainRouter;
+
+ // Initialize the main view.
+ App.dashboard = new App.Dashboard({ ... });
+
+ // and so on...
+});
+
+// Or its shorter form:
+$(function() {
+ // ...
+});
+```
+
+A common anti-pattern is to put class definitions (for views, models, and such)
+inside these blocks. They are not necessary.
+
+``` javascript
+// AVOID this:
+$(function() {
+ App.PhotoView = Backbone.View.extend({
+ ...
+ });
+});
+```
+
+Your classes should be ready before the HTML DOM is. This will save you from
+running into problems later where certain classes may not be available at
+certain parts of your application.
+
+``` javascript
+// Consider instead:
+App.PhotoView = Backbone.View.extend({
+ ...
+});
+```
@@ -0,0 +1,14 @@
+Event handlers outside views
+----------------------------
+
+Every time you make an event handler outside a view class, consider making a new
+view class.
+
+``` javascript
+App.PhotoView = Backbone.View.extend({
+ ...
+});
+
+// AVOID this!
+$("a.photo").click(function() { ... });
+```
View
No changes.
@@ -0,0 +1,3 @@
+# Things outside views
+
+Put things in your view class code as much as possible.

0 comments on commit 02542d3

Please sign in to comment.