Februar
13
2006

Smarty Gewusst wie: Debuggen von Javascript Vorlage

UPDATE: Ein Download-Paket finden Sie hier: http://ideamesh.com/file/11/Smarty-Debug-with-Collapsible-Variables.html

Hier ist der modifizierte Code, arbeiten und bereit zu gehen ..

Hier ist der Link, wo Sie die nanotree JavaScript herunterladen können ...
http://nanotree.sourceforge.net/~~V

Ersetzen Sie meine Variable $ {} Site.framework_pub angemessen, so dass die JavaScript und Bilder korrekt geladen werden kann.

Bitte beachten Sie auch, habe ich in einem Abschnitt hinzugefügt, um benutzerdefinierte Debug-vars handhaben ... Meine Debug-Struktur wird mit dem Namen '_user_debug' und '_user_debug_key'

Für weitere Informationen, wie Sie diesen Blick auf diesen Thread zu implementieren:
http://www.smarty.net/forums/viewtopic.php?p=31241 # 31241

Andernfalls, wenn Sie nicht interessiert sind, ist es sicher, diesen Abschnitt aus der Vorlage entfernen. Man könnte auch entfernen Sie die {if} Anweisung Früher habe ich die Vorlage var-Abschnitt zu wickeln.

Eine andere Sache, die Sie mit spielen könnte, ist, wie viele Zeichen ausgegeben als Wert für Debug. Achten Sie auf dieses zu ändern und die zweite Zahl ein, um den Ausgang max chars ändern: @ debug_print_var: 0:1000

PS Kann jemand herausfinden, warum ich immer ein Raum oberhalb der <h3> bin in die richtige Zelle?

Hope this helps, weiß ich, Ich mag es, Lächeln

PS Um die ganze JavaScript richtig funktioniert müssen Sie lediglich die Zeile ändern "var mynanopath =" und stellen Sie sicher, es zeigt auf Ihren öffentlichen nanopath Verzeichnis. Sie können sich das Paket aus nanotree http://sourceforge.net/projects/nanotree/

Hier ist der Code aktualisiert

Code:
{*
Smarty Template benutzerdefinierte DHTML Debug
@ Author Hielke Hoeve
@ Author Owen Cole <owenc bei ideamesh dot de>
@ Since 2006.02.13 Smarty 2.6.12
@ Smarty Paket
@ Dateiname debug.tpl
*}

{} Assign_debug_info

<script Language=javascript>
var mynanopath = "{$ Site.javascript_path} \ / nanotree \ /";

if (self.name == ") {} ldelim
var title = 'Console';
{Literal}
else {} ldelim
var title = 'Console_' + self.name;
{Literal}
_smarty_console = window.open ("", title.value, "width = 800, height = 600, resizable, scrollbars = yes");
_smarty_console.document.write ("<html> <head> <title> Smarty Debug Console_" + + self.name "<\ / title> \ n");
_smarty_console.document.write ("<style> \ n");
_smarty_console.document.write ("h3 {} ldelim padding: 5px 5px 5px 5px; margin: 0px 0px 0px 0px; background-color: # CCCCCC; {literal} \ n");
_smarty_console.document.write ("# {debugtreetable ldelim} width: 100%; {literal} \ n");
_smarty_console.document.write ("# debugtreetable} td {border ldelim: thin solid black; {literal} \ n");
_smarty_console.document.write ("# debugtreetextdiv div {} ldelim padding-left: 10px; {literal} \ n");
_smarty_console.document.write ("<\ / style> \ n");
_smarty_console.document.write ("<script language=\"Javascript\" src=\"" + + mynanopath "nanotree.js\"> <\ / script> \ n");
_smarty_console.document.write ("<script type=\"text\/javascript\" language=\"JavaScript\"> \ n");
_smarty_console.document.write ("<- \ n");
_smarty_console.document.write ("showRootNode = true; \ n");
_smarty_console.document.write ("sortNodes = 0; \ n");
_smarty_console.document.write ("Dragable = false; \ n");
_smarty_console.document.write ("showAllNodesOnStartup = true; \ n");

_smarty_console.document.write ("\ / ** \ n");
_smarty_console.document.write ("* Benötigte um den Baum zu initialisieren \ n".);
_smarty_console.document.write ("* Und zu showtree (imagePath) nennen;., um tatsächlich zeigen den Baum \ n");
_smarty_console.document.write ("* Alternativ kann dies in einem Skript Block am Ende der Seite durchgeführt werden. \ n");
_smarty_console.document.write ("* Obwohl diese Methode etwas sauberer ist. \ n");
_smarty_console.document.write ("* \ / \ n");
_smarty_console.document.write ("function init () {ldelim} \ n");
_smarty_console.document.write ("Container = document.getElementById ('debugtreediv'); \ n");
_smarty_console.document.write ("showtree ('" + mynanopath + "'); \ n");
_smarty_console.document.write ("{literal} \ n");

_smarty_console.document.write ("\ / ** \ n");
_smarty_console.document.write ("* Wird aufgerufen, wenn ein Benutzer auf einen Knoten. \ n");
_smarty_console.document.write ("* @ param TreeNode das TreeNode-Objekt, das angeklickt haben. \ n");
_smarty_console.document.write ("* \ / \ n");
_smarty_console.document.write ("Funktion StandardClick (TreeNode) {ldelim} \ n");
_smarty_console.document.write ("var mytext = document.getElementById ('debugtreetextdiv'); \ n");
_smarty_console.document.write ("var param = treeNode.getParam (); \ n");
_smarty_console.document.write ("mytext.innerHTML = (param ==") treeNode.getName ():? '<h3>' + treeNode.getName () + '<\ / h3> <div>' + + param ' <\ / div> '; \ n ");
_smarty_console.document.write ("{literal} \ n");

_smarty_console.document.write ("Funktion nodeEdited (TreeNode) {ldelim} \ n");
_smarty_console.document.write ("{literal} \ n");

_smarty_console.document.write ("var closedGif = '" + + mynanopath "images \ / folder_closed.gif'; \ n");
_smarty_console.document.write ("var openGif = '" + + mynanopath "images \ / folder_open.gif'; \ n");
_smarty_console.document.write ("var pageIcon = '" + + mynanopath "images \ / Seite 16 × 16.gif'; \ n");
_smarty_console.document.write ("var usericon = '" + + mynanopath "images \ / user_16 × 16.gif'; \ n");
_smarty_console.document.write ("var HelpIcon = '" + + mynanopath "images \ / help_16 × 16.gif'; \ n");

{* Erstellen Basisknoten *}
{Assign var = Zählerwert = 0}
_smarty_console.document.write ("rootNode = new TreeNode ({$ counter}, 'Smarty Debug', HelpIcon, 'Dies ist die Debug-Baum Es ersetzt die klassische Version der Smarty Debug-Konsole.'); \ n");
{$ Counter + +}

{* Erstellen von Knoten für die Vorlage enthält *}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'mitgelieferten Vorlagen & Config-Dateien (Ladezeit in Sekunden):', pageIcon, '");
_smarty_console.document.write ("<table width=\"100%\">");
{Section name = Vorlagen loop = $ _debug_tpls}
_smarty_console.document.write ("<tr bgcolor={if %templates.index% ist even}#eeeeee{else}#fafafa{/if}> <td colspan=2> <tt> {section name = Gedankenstrich loop = $ _debug_tpls [Vorlagen]. Tiefe} &&& {/ section} <font color = {if $ _debug_tpls [Vorlagen]. Typ eq "Schablone"} {elseif $ braun _debug_tpls [Vorlagen]. Typ eq isset ($ _debug_tpls [Vorlagen] exec_time.)} <font size=-1> <i> ({$ _debug_tpls [Vorlagen] exec_time | string_format:. "% 0,5 f"}) {if% templates.index% eq 0} (gesamt) {/ if} <\ \ / i> <\ \ / font> {/ if} <\ \ / tt> <\ \ / td> <\ \ / tr> ");
{} Sectionelse
_smarty_console.document.write ("<tr bgcolor=#eeeeee> <td colspan=2> <tt> <i> keine Vorlagen enthalten <\ \ / i> <\ \ / tt> <\ \ / td> <\ \ / tr> ");
{/ Section}
_smarty_console.document.write ("<\ \ / table>");
_smarty_console.document.write ("'); \ n");

_smarty_console.document.write ("rootNode.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}

{* Erstellen von Knoten für Benutzer Debug-Variablen *}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'Benutzer Debug-Variablen:', new Array (closedGif, openGif)); \ n");
_smarty_console.document.write ("rootNode.addChild (Knoten {$ counter}); \ n");
_smarty_console.document.write ("var parent = Knoten {$ counter}; \ n");
{$ Counter + +}

{* Erstellen Sie untergeordnete Knoten für Benutzer Debug-Variablen *}
{Section name = vars loop = $ _user_debug}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter} '{} ldelim $ {$ _user_debug_key [VARs]} {literal}', pageIcon, '{$ _user_debug [VARs] | @ debug_print_var: 0:1000 | escape: JavaScript | escape: javascript} '); \ n ");
_smarty_console.document.write ("parent.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}
{} Sectionelse
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'No User Debug-Informationen zugewiesen', HelpIcon); \ n");
_smarty_console.document.write ("parent.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}
{/ Section}

{* Erstellen von Knoten für die Template-Variablen *}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'Template-Variablen zugewiesen:', new Array (closedGif, openGif)); \ n");
_smarty_console.document.write ("rootNode.addChild (Knoten {$ counter}); \ n");
_smarty_console.document.write ("var parent = Knoten {$ counter}; \ n");
{$ Counter + +}

{* Erstellen Sie untergeordnete Knoten für Template-Variablen *}
{Section name = vars loop = $ _debug_keys}
{If $ _debug_keys [VARs]! = '_user_debug' && $ _debug_keys [VARs]! = '_user_debug_key'}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter} '{} ldelim $ {$ _debug_keys [VARs]} {literal}', pageIcon, '{$ _debug_vals [VARs] | @ debug_print_var: 0:1000 | escape: JavaScript | escape: javascript} '); \ n ");
_smarty_console.document.write ("parent.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}
{/ If}
{} Sectionelse
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'Keine Template-Variablen zugewiesen', HelpIcon); \ n");
_smarty_console.document.write ("parent.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}
{/ Section}

{* Erstellen von Knoten für smarty config-Datei Variablen *}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'zugeordnet config-Datei Variablen (äußere Vorlage Geltungsbereich):', new Array (closedGif, openGif)); \ n");
_smarty_console.document.write ("rootNode.addChild (Knoten {$ counter}); \ n");
_smarty_console.document.write ("var parent = Knoten {$ counter}; \ n");
{$ Counter + +}

{* Erstellen Sie untergeordnete Knoten für smarty config-Datei Variablen *}
{Section name = config_vars loop = $ _debug_config_keys}
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter} '{} ldelim $ {$ _debug_config_keys [config_vars]} {literal}', pageIcon, '{$ _debug_config_vals [config_vars] | @ debug_print_var: 0:1000 | escape: JavaScript | escape: javascript} '); \ n ");
_smarty_console.document.write ("parent.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}
{} Sectionelse
_smarty_console.document.write ("var Knoten {$ counter} = new TreeNode ({$ counter}, 'Keine Config-Variablen zugewiesen', HelpIcon); \ n");
_smarty_console.document.write ("parent.addChild (Knoten {$ counter}); \ n");
{$ Counter + +}
{/ Section}

_smarty_console.document.write ("\ / \ / -> \ n");
_smarty_console.document.write ("<\ / script> \ n \ n");
_smarty_console.document.write ("<\ / head> <body onload=\"init()\"> \ n");
_smarty_console.document.write ("<h3> Smarty & User Debug-Konsole <\ / h3>");
_smarty_console.document.write ("<h4> Klicken Sie auf die Variablen, die in dem Baum, um ihren Inhalt im rechten Panel angezeigt haben <\ / h4>.");
_smarty_console.document.write ("<table border='0' id='debugtreetable'> <tr>");
_smarty_console.document.write ("<td valign='top' style='width: 250px;'> <div id='debugtreediv'> & <\ / div> <\ / td>");
_smarty_console.document.write ("<td valign='top'> <div id='debugtreetextdiv'> & <\ / td>");
_smarty_console.document.write ("<\ / tr> <\ / table>");
_smarty_console.document.write ("<\ / body> <\ / html>");
_smarty_console.document.close ();
</ SCRIPT>

Tags: ,
posted in Guides , Programmierung von Owen

Folgen Sie Anmerkungen über den RSS-Feed | Kommentar schreiben | Trackback-URL

Lassen Sie Ihren Kommentar

 
© 2008 - 2012 - Alle Rechte vorbehalten - Ideamesh, Inc. 22 Zugriffen. 0,342 Sekunden.