[Bleistift]

Vielleicht erscheint die Frage jetzt als ein bisschen blöd... Aber gibt es ein Templatesystem für Javascript? Ich kriege Daten (JSON) mit AJAX zugespielt und stelle die dar. Aber als MVC-Freak würde ich alles gerne trennen. Hat jemand eine Idee, oder muss ich selber etwas basteln?
//EDIT: Habe gerade http://amix.dk/blog/viewEntry/?id=161 gefunden. Aber so wirklich gefallen tut es mir nicht. Ist irgendwie etwas à la printf("...", bla);

[Ben]

Ich muss gestehen, dass ich nicht genau weiß, worauf du hinaus willst.

Du willst das "Laden" der Daten von der Ausgabe trennen. Okay. Reicht da nicht einfach eine simple Funktion/Methode oder ist das bei dir so komplex, dass man da wirklich etwas "Template-Engine"-mäßiges für braucht?

[Bleistift]

Also ganz konkret: Ich hab ein JS-File das ca. so aussieht:

for(i=0;i<files.length;i++) {
    var tdclass = 'td1';
    if(i % 2 == 0)
        tdclass = 'td2';
    temp_html += '<tr style="height: 65px;" onclick="Filemanager_Details.show(\''+json&#91;'path'&#93;+'\',\''+files&#91;i&#93;.name+'\');">\n';
    //...
}
$("browser").innerHTML = temp_html;
 

Nun gefällt mir aber das gebastelt mir temp_html nicht so. Erinnert mich an meine ersten Schritte in PHP. Weil mich das schon in PHP störte, stieg ich auf Smarty um. Jetzt suche ich etwas ähnliches für JS.

[$traight-$hoota]

in meiner scriptsammlung von Jooo.de hab ich folgendes gefunden: (benötigt Prototype Framework, nur getestet im FF!)

XML = {
    createTemplate: function(elem){
        return new XML.Template(elem);
    },
    hasCDATA: function(elem){
        return elem.firstChild.nodeType == Node.CDATA;
    },
    getCDATA: function(elem){
        if(this.hasCDATA(elem))
            return elem.firstChild.nodeValue;
        else
            throw new Exception("element doesn´t contain #CDATA content");
    }
}
XML.Template = Class.create();
XML.Template.prototype = {
    initialize: function(elem){
        this.elem = elem;
        this.html = XML.hasCDATA(elem) ? XML.getCDATA(elem) : Element.getInnerHTML(elem);
        if(this.elem.hasAttribute("xmlns")){
            this.xmlns = this.elem.getAttribute("xmlns");
        }else{
            this.xmlns = "http://www.w3.org/1999/xhtml";
        }
        this.vars = new Array();
    },
    assign: function(key, value){
        if(value == undefined && key.each && typeof key.each == "function"){
            key.each(function(item){
                value = item.value;
                key = item.key;
                this._assign(key, value);
            }.bind(this));
        }else
            this._assign(key, value);
    },
    _assign: function(key, value){
        //alert("assign: "+key+"=>"+value);
        this.vars[key] = value;
    },
    toHTML: function(o){
        this.parse(o);
        return this.html;
    },
    hasKey: function(key){
        return this.vars[key] != undefined;
    },
    getKey: function(key){
        //alert("value: "+key+"=>"+this.vars[key]);
        return this.vars[key] || null;
    },
    parse: function(o){
        //alert(Object.dump(this.vars));
        if(typeof o == "object")
            this.assign("this", o);
        var templateVar = /\$\{([A-z_][A-z0-9_\-]+)(\.[A-z_][A-z0-9_\-]+)*\}/;
        var hits;
        while(hits = templateVar.exec(this.html)){
            var key = hits[1];
            if(! this.hasKey(key)){
                this.html = eval('this.html.replaceAll(/\\$\\{' + key + '(\\.[A-z_][A-z0-9_\\-]+)*\\}/, "' + hits[0].substring(1) + '");');
                continue;
            }
            path = hits.slice(2);
            path = path.collect(function(s){
                if(s == undefined) throw $continue;
                return s.substring(1);
            })
            var tplVar = key;
            if(path.length > 0)
                tplVar += '\\.' + path.join("\\.");
            var tplVal = this.getValue(key, path);
            if(tplVal == undefined){
                tplVal = "{" + tplVar + "}";
            }
            var func = 'this.html.replaceAll(/\\$\\{' + tplVar + '\\}/, "' + tplVal + '");';
            this.html = eval(func);
        }
    },
    getValue: function(key, path){
        function recursion(o, path){
            var key = path[0];
            //alert(Object.dump(o, "plain", false))
            if(o[key] == undefined){
                return undefined;
            }
            if(path.length == 1){
                return o[key];
            }
            return recursion(o[key], path.slice(1));
        }
        if(path.length == 0)
            return this.getKey(key);
        return recursion(this.getKey(key), path);
    }
}
 

Dieses Script ist Teil einer Widget-Engine und baut aus Templates in einer XML-Datei, die ein Widget beschreibt, den HTML-Code zur Darstellung.
Der Template-Code einer solchen XML-Datei sieht dann ungefähr so aus:

<div class="Widget NewsReader section">
    <h4>${title}</h4>
    ${date}
    <ol>
        <li class="empty"></li>
    </ol>
</div>
 

Der Template-Code muss nicht umbedingt als eigene XML-Datei vorliegen, sondern kann mit ein bischen Umbauen auch direkt im verwendenden Script stehen. Eine Trennung ist aber imo noch eher nach dem MVC prinzip. Aber das hängt auch von der jeweiligen Anwendung ab.

[Bleistift]

Das sieht super aus! Danke! Ich werde mir das mal heute Abend genauer ansehen.

[Bleistift]

Eine Frage hab ich noch: Wie lese ich denn die XML-Datei ein? Ein kleiner Use Case wäre ganz nützlich

[$traight-$hoota]

Auch einfach per XMLHttpRequest. Das response hat ja die Eigenschaft responseXML, die den komplett geparsten DOM-Tree der XML-Datei enthält.
Du kannst in eine Datei auch mehrere Templates packen und die dann im javascript separieren.
beispiel:

<?xml version="1.0" encoding="UTF-8" ?>
<t:templates xmlns="http://www.w3.org/1999/xhtml" t:xmlns="http://dev.straight-shoota.de/jooo/xml/template">
    <t:template name="userMessage" >
        <div class="UserMessage">
            <h4>${title}</h4>
            <p>${content}</p>
        </div>
    </t:template>
    <t:template name="listItem">
        <li><a href="${item.href}" title="${item.title}">${item.label}</a></li>
    </t:template>
</t:template>
 

[bobby]

Also bisher hat mir die Templateklasse von Prototype gute Dienste erwiesen http://prototypejs.org/api/template. Aber die Lösung von $traight-$hoota ist eindeutig professioneller.

bobby.

[Bleistift]

Da nutzt man monatelang Prototype und kennt immer noch nie alle Funktionen