Scriptorama.nl

Steeds kom je vaker HTML in combinatie met Javascript tegen. Vaak wordt de HTML gemixed met Javascript, met soms rare constructies als gevolg.

Dit is geen nette HTML en al helemaal niet semantisch. Met behulp van een Javascript library kunnen we dit tegengaan. In dit artikel zal ik Behaviour behandelen, ontwikkeld door Ben Nolan.

Laten we beginnen met een simpel voorbeeld waarbij we geen Javascript hebben. We hebben een lijst met allemaal links.

Onze eisen gaan omhoog. Bij bepaalde events wil je een Javascript functie aanroepen, denk bijvoorbeeld aan een XMLHttpReqest call. Laten we event onclick nemen. Bij een klik willen we functie click() aanroepen. Deze functie hebben we in een aparte Javascript bestand staan en heeft alleen een alert().

Onze nieuwe HTML bestand ziet er zo uit.

Bij het klikken op een link krijg je een alert. Dit voorbeeld laat slechts een simpele constructie zien met een event, maar het kan dus veel gecompliceerder zoals ik al eerder liet zien. Dit leidt tot vreselijke HTML die je liever niet aan je oma laat zien.

Schoonmaakbeurt met Behaviour

Met behulp van Behaviour kunnen we al deze Javascript constructies uit de HTML halen. Dit levert wel schone HTML en leidt tot betere semantische HTML. Laten we eerst de HTML opschonen.

De onclick event is weggehaald, we hebben de HTML weer in oude staat. Er is wel een aanpassing, we hebben een id gegeven aan de unordered list (<ul>). Nu willen we nog dat click() wordt aangeroepen bij een klik op een link. Om dit te bereiken hebben de hulp nodig van Behaviour. Onze nieuwe HTML:

We hebben twee nieuwe Javascript bestanden erbij gehaald, behaviour.js en rules.js. Behaviour.js mag duidelijk zijn, maar wat is rules.js? Hieronder staat rules.js:

Deze 'rules' gelden voor id "list" en bijbehorende list items (<li>). Bij een onclick event wordt de functie click() aangeroepen. Dankzij Behaviour worden er bij kliks op de links functie click() aangeroepen en dit allemaal zonder enig Javascript code in de HTML. Let wel op dat je de bestanden op de juiste volgorde binnenhaalt! Je kunt natuurlijk meerdere rules aanmaken en ook andere events gebruiken. Zie de Behaviour documentatie voor meer informatie.
Naast de eerder genoemde voordelen, heb je in feite ook je Javascript logica gescheiden van je HTML presentatie. Met andere woorden, een simpele template engine. Op Borkweb vind je een uitgebreide AJAX template engine, zeer net! Natuurlijk met Behaviour en iedereens favoriete Javascript library Prototype.