Ich benutze jQueryUI und jQuery-tmpl, aber ich glaube, dass der Rat, nach dem ich suche, so breit ist, dass er auf jede Art von Templating-Bibliothek angewendet werden kann.
Das Problem, das ich habe, ist, dass ich oft eine Art CRUD Widget in meiner Vorlage habe
%Vor%Das lässt mich mit einem sehr gut lesbaren Widget zurückgehen und bearbeiten, etc. Außer dass es hässlich ist. Mit jQueryUI kann ich die Schaltfläche sehr schön machen, aber es benötigt etwas Javascript. In meinem entsprechenden Javascript-Controller sieht mein Code so aus:
%Vor%Für dieses sehr einfache Beispiel funktioniert das gut. Mein Controller wird jedoch schnell überladen, je mehr Elemente transformiert werden müssen. Es fühlt sich auch so an, als sollte dies das Anliegen der View / Templating Engine sein, ganz zu schweigen von magischen Strings ("# some-widget-save"), die die Wartbarkeit des Codes verschlechtern.
Was ist der beste Weg, dies zu tun? Sicherlich kann ich nicht die erste Person sein, die auf dieses Problem trifft. Ich habe jquery-tmpl zusammengehackt, so dass vor dem Zurückgeben eines jQuery-Objekts nach einem Schaltflächenelement gesucht wird und es, falls es darauf trifft, in ein korrektes Schaltflächenelement umgewandelt wird. Dies scheint langsam zu sein, da es jedes Element in der Vorlage durchlaufen muss. Irgendwelche Ideen?
Bearbeiten: Ich habe festgestellt, dass bei der Verwendung von CSS3 90% meiner Probleme beseitigt wurden. Beim Erstellen für nicht-CSS3-kompatible Browser verwende ich die Factory-Methode.
Haftungsausschluss: Das erste Mal, dass ich von jQuery-tmpl gehört habe, ist beim Lesen Ihrer Frage.
Ausgehend von meinem Verständnis Ihres Problems würde ich versuchen, meine Widget-Instanziierung so zu strukturieren, dass die Änderungen automatisch und allgemein für alle Elemente auf einer bestimmten Seite, die bestimmten Parametern entsprechen, vorgenommen werden.
Sie könnten eine UI-Initialisierungsfunktion in Ihr Framework einfügen, die bei Aufruf alle Elemente des DOM, dem Sie es sagen, betrachtet und sie dann in jQuery UI-Widgets umwandelt. Der Fluss würde etwas wie ..
gehenjQuery-tmpl würde basierend auf Ihren Daten eine Reihe strukturierter Elemente ausgeben ...
%Vor%Die Instanziierungsmethode könnte ungefähr so aussehen ...
%Vor%Wenn Sie die von der Klasse ausgewählten UI-Elemente anstelle von ID instanziieren, können Sie beliebig viele von ihnen in das Dokument einfügen, und alle werden sofort "instanziiert", da jQuery alle Elemente auswählt und wenden Sie den UI Widget-Konstruktor auf sie an.
Wenn Sie vor der Verarbeitung dieser Widgets einen Vorverarbeitungscode (z. B. jQuery-tmpl) ausführen müssen, können Sie die Widgets-Initialisierung kapseln und aufrufen, sobald alle jQuery-tmpl-Verarbeitung aus dem Weg ist.
Wie auch immer, ich hoffe, das hilft!
P.S. Vielleicht ist das etwas mit jQuery-tmpl (obwohl ich nicht weiß, was), aber es scheint, dass Ihr Widget aus DOM-Elementen in einem Skript-Tag besteht. Etwas daran erscheint mir sehr unregelmäßig; P