HTML von Javascript trennen

HTML mittels CSS zu stylen und den Inhalt der Seite vom Layout zu trennen hat sich ja mittlerweile eingebürgert. Javascript vom Inhalt zu trennen ist aber noch recht neu. Ben Nolan hat mit Behaviour eine fantastische Möglichkeit gefunden, die Seiten vom Javascript-Code zu befreien, mehr Übersicht zu erhalten und trotzdem genauso flexibel zu sein.

Behaviour ersetzt die on-Events (onclick, onfocus …) im HTML-Code über eine globale Javascript-Klasse.

Ein Beispiel nach dem klassichen Verfahren:

<ul>
    <li><a onclick="this.parentNode.removeChild(this)" href="#">Click me to delete me</a></li> 
</ul>

Dies würde das angeklickte Listenelement verschwinden lassen.

Mittels Behaviour setzt sich das ganze aus dem puren HTML:

<ul id="example">
    <li><a href="/someurl">Click me to delete me</a></li>
</ul>

und ein wenig Javascript zusammen:

var myrules = {
    '#example li' : function(el){
        el.onclick = function(){
            this.parentNode.removeChild(this);
        }
    }
};
Behaviour.register(myrules);

Eine wunderbare Sache, das ganze macht den HTML-Code schlanker und wartbarer.

Links:


Comments closed

Sorry, new comments are no longer allowed for this entry.

Write me an email if you have feedback or any questions regarding this post. If you found this post useful and just want to say thank you then don't forget that I have an Amazon Wishlist. :-)


↑ to the elevators

© 2001—2010 Martin Mahner. This is an I ♥ Django Project.

Admin | Generated: Wed, 28 Jul 2010 11:10:18 +0200