I'm also learning how to use CoffeeScript, which is close enough to python/ruby for me to understand.
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:
and the html to go with that:
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.
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.
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.
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.
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.
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.