Simplest Ever Backbone.js/CoffeeScript Example

I'm teaching myself to use Backbone because after having done quite a lot of JavaScript in work lately, it has become obvious to me that I need a framework.

I'm also learning how to use CoffeeScript, which is close enough to python/ruby for me to understand.

First thing that I noticed is that most of the examples for Backbone out there are in pure JavaScript, so I thought I'd do my bit by providing something in CoffeeScript.

To that end, here is a very simple app which displays a number. You can increase or decrease the count by clicking buttons.

The app.coffee code:

	window.app = {}
	app.controllers = {}
	app.models = {}
	app.views = {}
	class window.MainController extends Backbone.Controller
	routes :
	"": "home"
	"home": "home"
	home: ->
	app.views.counter.render()
	class window.Counter extends Backbone.Model
	defaults:
	count: 0
	class window.CounterView extends Backbone.View
	initialize: ->
	@counter = new Counter()
	@render()
	el: $('#counter')
	events:
	'click button#inc-count' : 'inc'
	'click button#dec-count' : 'dec'
	render: ->
	$(@el).find("#count").html "The count is " \
	+ @counter.get("count")
	@
	inc: ->
	ct = @counter.get("count")
	@counter.set(count: ct+1)
	@render()
	dec: ->
	ct = @counter.get("count")
	@counter.set(count: ct-1)
	@render()
	head.ready ->
	app.controllers.main = new MainController()
	app.views.counter = new CounterView()
	app.models.counter = new Counter()
	Backbone.history.start()

view raw app.coffee hosted with ❤ by GitHub

and the html to go with that:



In detail

At the top, we set up global hashes to store our objects. In a bigger app this would make referencing bits and pieces much easier, although we don't really need it in this example.

	window.app = {}
	app.controllers = {}
	app.models = {}
	app.views = {}

view raw 1.coffee hosted with ❤ by GitHub

Next the controller. This one is almost empty except it has two routes both taking you to the home control which is also part of the controller. The route with no reference (the empty string) and the one for #home tagged on the end of your URL (by way of an example) both call the home function in this case.

The home control just tells the view to render itself.

	class window.MainController extends Backbone.Controller
	routes :
	"": "home"
	"home": "home"
	home: ->
	app.views.counter.render()

view raw 2.coffee hosted with ❤ by GitHub

Next the Counter model which has one attribute called count which defaults to zero. In reality I think you would want to synchronize your models with a database, but we'll do that in another post soon.

	class window.Counter extends Backbone.Model
	defaults:
	count: 0

view raw 3.coffee hosted with ❤ by GitHub

And now for the View. The View is obviously what you are seeing in the browser. In our trivial example we only have one view, but a real app would probably have several. A view lumps together a unit of the app, sometimes nowadays we call these widgets, or blocks or display regions or whatever. You get the idea.

In the initialize function, we just connect the view to the model that backs it. The events connect the button to the functions that they call. The render function draws the result into the #count div; the @ symbol at the end is shorthand for this. In CoffeeScript (like Ruby) the last line of a function gets returned even if you don't specifically say "return". So in other words it means "return this". This is handy since it lets us chain together functions.

The inc and dec functions increase and decrease the count in the model and then update the display. Please see the update here.

	class window.CounterView extends Backbone.View
	initialize: ->
	@counter = new Counter()
	el: $('#counter')
	events:
	'click button#inc-count' : 'inc'
	'click button#dec-count' : 'dec'
	render: ->
	$(@el).find("#count").html "The count is " \
	+ @counter.get("count")
	@
	inc: ->
	ct = @counter.get("count")
	@counter.set(count: ct+1)
	@render()
	dec: ->
	ct = @counter.get("count")
	@counter.set(count: ct-1)
	@render()

view raw 4.coffee hosted with ❤ by GitHub

Finally the equivalent of the main() function which instaniates the bits and bobs and then starts the history. I've no idea why they called it history, but basically it starts up all the listeners.

	head.ready ->
	app.controllers.main = new MainController()
	app.views.counter = new CounterView()
	app.models.counter = new Counter()
	Backbone.history.start()

view raw 5.coffee hosted with ❤ by GitHub

That's all for now. Next time I'll show you how to connect all this to your database using python and Flask.

If you see anything wrong with what I've written here or if you spot spelling or other mistakes then please let me know.