unix addicted webdeveloper & designer…

Wer auf “State of the Art” Features wie Nesting, Loops und ähnliches verzichten kann, für den lohnt es sich in ein paar Zeilen ein eigenes Template-Plugin zu schreiben.

Hier das jQuery Plugin:

jQuery.fn.render = function(values){

    this.each( function (index, template) {

        var org_ob = $(template)
        var ob = org_ob.clone();

        for (var key in values) {
            re = new RegExp('@'+key+'@', 'gm');
            ob.html(ob.html().replace(re,values[key]))
        }  

        ob.addClass('jst_ready').insertAfter(org_ob)

        var id = org_ob.attr('id');
        re = new RegExp('jst_', 'gm');
        ob.html(ob.html().replace(re,id))

        if (ob.hasClass('jst_hide')) { ob.hide(); } else { ob.show(); }

    });
}

Templates sehen dann so aus:

<div class="name" style="display:none;">@firstname@ @lastname@</div>

und

$('.name').render({'firstname':'Max','lastname':'Muster'});

macht daraus…

<div class="name_item jst_ready" style="display:none;">Max Muster</div>

Darüber hinaus kann durch die Klasse “jst_hide” das Template zwar gerender aber nicht angezeigt werden und eine “id” sollte wie folgt aufgebaut sein damit es keine Kollisionen gibt.

id="jst_name"

wird zu

id="name"

No related posts.