I’m learning BackboneJS, Underscore and related coding strategies. I will share with you my experience on this stuff publishing a set of full documented examples in a GitHub repository.
001. Hello World
Display a bouncing “hello world” string implementing a basic Backbone app.
002. Hello World – View
It uses a Backbone’s View object to handle the “hello world” string plus belong to a jQuery plugin to expose the bouncing effect.
003. Hello World – Model
This is the first interactive example. Ask user’s name and uses a Backbone Model to write it down to a compiled (Underscore) template.
004. Handling Events
Configure a Backbone’s View object to handle some basic events on buttons, links, input and write some log informations responding to these events.
Log messages are created by compiling some Backbone’s View objects with custom events data.
005. Syncing Models with Views
In a real world application you may need to bind a model’s data updates to one or more views to be sychronized with.
If you have a “person” with a name and surname and you display this data in more than one place (people lists and person detalis) you may need to update you interface according to the model’s data updates.
This example bind a FormView to fill a PersonModel then bind PersonModel’s updates to two different “ShowViews” that display PersonModel’s data in different ways.
006. Model Validation
In a real world application you may need to validate model’s data who came form a user compiled form.
This app experiment a simple form validation focusing on how events happens and how different objects (views, model) acts together to ensure data integrity.
007. Underscore Template
Playing with Underscore templates from different sources: hard coded into models, defined into a script block, fetched from a template file via RequestJS text! plugin or fetched from a DOM html content.
008. Backbone Collection ObjectPlaying with Backbone Collection Object. Loads some tweets with JsonP, store it into a TweetCollection of TweetModel(s) then run a View that updates according to the collection.
009. TwitterSearch AppThis demonstrative App allow user to search Twitter and display matching Tweets. It use Dependency and Observe patterns to make objects talks together.