leesbaarheid en aparte boot.js

Ik split de eigen scripts in twee gedeeltes:

Componenten
-----------

Componenten moeten zo veel mogelijk onafhankelijk van het laaden
volgorde zijn. Als een component script wordt geladen kan het niet
verwachten dat een andere component al wel of niet geladen is. Ze kunnen
naar elkaar wel verwijzen binnen hun methods (functions) want we zorgen
dat die worden pas geroepen als alle componenten zijn geladen.

Componenten mogen wel vanuit gaan dat sommige scripts zijn al geladen:

1. web pagina DOM. Omdat we scripts aan het eind van de pagina laden is
DOM al geladen en geparsed. We hoeven dus niet `$(document).ready( ...
)` trukje doen.

2. alle dependencies (bibliotheken).

3. hoofdcontroller (js/controllers/prom.js), dus globale variabele
`Prom` is al gedefineerd en alle components kunnen zichzelf exporteren
binnen de `Prom` namespace.

4. Eventuele hulp objecten - dwz eigen herbruikbare stukken code. Dat
zijn dependencies die we zelf ontwikkelen.

Startup code (boot.js)
----------------------

boot.js wordt als laatste geladen en geevalueerd. Het kan vanuit gaan
dat ook alle componenten zijn geladen en kunnen gebruikt worden. Startup
code creert instances van de componenten, bindt ze zonodig aan elkaar en
voert noodzakelijke initialisaties uit - bij voorbeeld het laden van
JSON bestanden en initialisaties van de modellen.
begin Prom.PatientTab controller

De controller is de object dat data (model) en user interface (view) van
logica voorziet.

Ik heb besloten om een aparte controller voor elke Tab subpagina te
maken, te beginnen met de patient tab.

Changes:

index.html
----------

laadt `js/controllers/patient_tab.js` in de componenten block.

js/controller/patient_tab.js
----------------------------

De controller zelf.

`elements` property beschrijft welke controller properties moeten worden
gemaakt voor bepaalde jquery selectors. Deze selectors worden niet in de
hele body gezocht maar alleen onder de controller's `el` (zie onder over
`el`). Het zoeken (query) wordt alleen uitgevoerd bij het maken van de
controller of als de `el` verandert via bepaalde Spine.Controller
methods. Scoping van selectors tot `el` zorgt dat controllers niet
buiten hun terrein prutsen, dat maakt het makkelijker om over de systeem
te redeneren (als iets mis gaat onder '#pattab' - dan ziet de fout,
meest waarschijnlijk in PatientTab controller).

`.loadPatients()` ververst de patienten select. Het gebruikt daarvoor
`.populatePatients()` en `.patientOption()` methods.

js/boot.js
----------

1. maakt een instance van de controller (`patientTab`).

2. initialiseert `el` property van de controller.

`el` is de DOM node dat de controller als eigen terrein beschouwt - de
bedoeling is dat elke controller mag alleen html onder zijn `el`
aanraken / manipuleren / herschrijven. Als de controller met de
buitenwereld moet communiceren gebruikt het events (en denkt niet na wie
zou naar die events kunnen luisteren) of modellen.

3. bindt de "refresh" event van Prom.Outcome aan "loadPatients" method
van de controller. Het gebruikt een `.proxy( ... )` utility om te
zorgen, dat tijdens het uitvoeren van de callback `this` naar correcte
method verwijst. Het is "beyond the scope of this guide" :) om
javascript's this uit te leggen, maar de vuistregel in javascript Spine
is: gebruik `object.proxy( object.method )` als je een callback aan event
bindt. In coffeescript gebruikt men "fat arrow" operator voor callbacks
en is proxy niet nodig (of, correcter gezegt, de fat arrow maakt een
reeds geproxiede method).