JavaScript Probleme mit PURE

[mercsen]

Moin liebe CB geemeinde,
ich versuche mich gerade an dem JS Template Framework PURE.

Ich scheitere aber schon bei einer ganz einfachen ersetzung.

Ich versuche folgendes Template zu parsen:

(inhalt egal)

<div class="template">
    Da kommt der Inhalt: <span></span>
    <hr />
    <span class="name"></span>
    Und hier ist ein @ersetzer ;) --> @@name@@
    <hr />
    Und hier ist ein DIV ohne id:
    <div id="">Ohne id</div>
</div>

ich möchte einmal das span.name einen wert bekommt,
das normale span soll ersetzt werden mit content, das @@name@@ soll ersetzt werden und das div id="" soll eine id verpasst bekommen.

parsen tue ich so (auszug):

        var data = {'name': 'Test', '@@name@@':'neuer Name'};
        var template = System.func.templater.getTemplate(url); // Lädt das template
        var r = $(template)
        .directives({'span.name': 'name'})
        .render(data);
        
        return r;

da versuche ich erstmal nur span.name zu rendern, leider fliegt mir dann ein "Uncaught TypeError" um die Ohren mit dem Hinweis:
"Object#<Text> has no Method 'querySelectorAll'"

das ganze passiert in der find methode des pure objekts, in zeile 130.

function find(n, sel){
		if(typeof n === 'string'){
			sel = n;
			n = false;
		}
		if(typeof document.querySelectorAll !== 'undefined'){
			return (n||document).querySelectorAll( sel );
               //Uncaught TypeError: Object #<Text> has no method 'querySelectorAll'
		}else{
			return error('You can test PURE standalone with: iPhone, FF3.5+, Safari4+ and IE8+\n\nTo run PURE on your browser, you need a JS library/framework with a CSS selector engine');
		}
	}

das ominöre Object ist hier ein Textnode der als Inhalt einen zeilenumbruch enthält.

Meine frage ist nun WO ist das problem und WIE kann ich das umgehen?

 

[Freezedevil]

Ich hab davon grade zum ersten Mal gehört aber wenn ich auf der Seite ein bisschen rumsuche, dann sieht das hier so aus als wäre die Syntax:

var r = $(template).render(data, {'span.name': 'name'});

Wie gesagt kann es sein, dass ich mich täusche da ich eigentlich keine Ahnung davon hab.

 

[mercsen]

kommt aufs gleiche hinaus
selber fehler.

pure erkennt welches framrwork man nutzt (in meinem.fall jQuery) und erweitert es ueber die extend methode.
finde es so ein wenig uebersichtlicher, es aufzuspalten

trotudem danke fuers lesen ;D

p.s.
ich wundere mich aber auch wo der textnode herkommt, im template gibt es den nicht. jQuery interpretiert den aber irgendwie rein.

Ergänzung (10. August 2012)

So, ich denke ich konnte den Fehler ausmachen!
Unter dem Text war noch eine Zeile HTML Kommentar, diesen hat jQuery (wieso auch immer *grrr*) als leeren Textnode mit einem Umbruch unterpretiert und weil es daher nicht zum typ string gehörte wollte PURE stets seine kind elemente finden.

Schlimmer noch, außerhalb des DIV, welches den zu parsenden HTML Teil enthält, darf NICHTS stehen!

Hielt das für so dermaßen Unwahrscheinlich das ich das erst jetzt probiert habe den Kommentar zu entfernen.
Sowieso ist pure total darauf bedacht 100% gültigen code zu bekommen.
Das ding ist ein super schneller JavaScript Template Parser, aber schon wenn nur ein Element nicht gefunden wird schreddert er die gesamte Seite!

Das hier soll nur für leute sein die ähnliche Probleme haben: schreibt sauber und macht keine Kommentare am Ende rein und schon gar keine Leerzeile! Das mag PURE nicht.
Kommentare irgendwo innerhalb des Template divs sind ok.

 

[Freezedevil]

Hauptsache es klappt jetzt. Kannst du mir kurz erklären was der Sinn von Pure ist? Irgendwie hab ich das noch nicht durchdrungen.

 

[mercsen]

pure ist nichts weiter als ein templater.
man laedt also einmal eine html datei. dort wo spaeter der inhalt steheb soll, stehen dann platzhalter. pure eresetzt diese platzhalter dann mir richtigem content.

ich benutze es z.b. weil ich eine projektverwaltungssoftware geschrieben habe.
klickt ein user nun auf eib projekt generiert der php server jedesmal eine komplette html seite samt style informationen etc. und schickt diese an den user.
da die projekt seite aber immrr gleich aussieht und auch immer das gleichr verhalten an den tag legt habe ich nun beim start der seite ein template laden lassen. dann wird vom php server nur noch ein schwung daten ruebergeschickt und pure kuemmett sich darum das diese angezeigt werden.

so spart sich php den aufwand jedesmal eine identisch aussehende seite zu erzeugen und auch das laden wird dementsprechend beschleunigt.

hoffe es ist klar geworden

php kuemmert sich jetzt nur noch darum die daten zur verfuegung zu stellen, darstellung erfogt komplett ueber templates + javascript


und wie bei jedem templatesystem hast du jetzt logik und designe strikt getrennt. kannst das template einfach anpassen und selbst technisch nicht sehr versierte user koennen ehr eine html als eine phl datei anpassen