2010-08-21 6 views
10

Ich verwende ein Webanwendungsframework (Symfony 1.3.6), das dem MVC-Muster folgt.

Die Ansichtsebene besteht aus einem Vorlagendekorator. Die Vorlagendatei kann auch andere Vorlagen enthalten - das ist der Grund für meine Frage.

Unter der Annahme, dass es eine Seite (nennen wir es die ‚Homepage‘), die aus mehreren Vorlagen besteht - (der Code Refactoring geführt wurde, so dass die ‚Unter Vorlagen‘ können auf anderen Seiten verwendet werden

.

Als Ergebnis des Refactorings müssen die kleinen Vorlagen, die von der Hauptvorlage verwendet werden (in unserem Beispiel "Homepage"), ihren jQuery-Code enthalten.

Nehmen wir an, die Homepage-Vorlage verwendet 2 'sub Vorlagen:

  • Vorlage A
  • Vorlage B

davon ausgehen, dass der folgende Code-Schnipsel Vorlage A besteht:

<div id="field1">This is field 1</div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#field1').click(function(){ 
     alert('Field 1 clicked!'); 
    }); 
</div> 
</script> 

davon ausgehen, dass Vorlage B der folgenden Ausschnitt aus:

<div id="field2">This is field 2</div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#field2').click(function(){ 
     alert('Field 2 clicked!'); 
    }); 
</div> 
</script> 

Nun ist die Vorlage 'Homepage' sieht so aus:

<html> 
    <head> 
    <title>Multiple jQuery snippet test</title> 
    <script src="path_to_jquery"></script> 
</head> 
<body> 
    <div>include_template('template A')</div> 
    <div>include_template('template B')</div> 
</body> 
</html> 

Ich habe dies versucht - und zu meiner Überraschung funktionierte es, dass es nur ein $ (Dokument) .ready() in der zusammengeführten, letzten Seite ('Homepage) gab.

Ich bin mir nicht sicher, ob entweder mein Browser (Firefox) oder das Web-Framework (Symfony) hinter den Kulissen etwas "aufgeräumt" hat.

Meine Frage ist also, was ist der beste Weg, um fortzufahren, wenn Sie jQuery-Funktionalität in 'kleine wiederverwendbare Vorlagen' umgestalten wollen, die wiederverwendet werden können, um die gleiche Funktionalität auf verschiedenen Seiten bereitzustellen?

BTW, ich hoffe, niemand schlägt vor, ein jQuery-Plugin zu schreiben, wie das ist SO nicht, worüber ich spreche.

+0

Meinen Sie Ihnen einen Anruf fusioniert Funktion bekamen oder dass nur ein Feld sein Click-Ereignis hat? Wenn Sie sicher sein wollen, dass Firefox gereinigt wird, versuchen Sie wget, Ihre Seite wird nicht geändert. – greg0ire

Antwort

13

Es gibt keine sind Probleme mit mehreren $(document).ready() Anrufe, nur ein paar Vorbehalte:

  • Reduzierte Lesbarkeit.
  • Scope: eine Funktion/Variable/Objekt innerhalb einer deklariert $(document).ready() wird in keiner anderen sichtbar sein. Sehen Sie dieses einfache demo.

Auch diese siehe vorherige Frage auf SO:

+0

+1, Guter Punkt bezüglich des Umfangs. –

+0

jsut jetzt über jsfiddle herausgefunden. Danke =) – Galen

5

Sie können tatsächlich so viele Instanzen von $(document).ready() auf einer Seite verwenden, wie Sie möchten. Sie können Ihre Blöcke mit Initialisierungscode auf die für Ihre Anwendung am besten geeignete Weise gruppieren. Was Sie an Flexibilität gewinnen, können Sie ein wenig an Klarheit verlieren, da es nicht mehr so ​​einfach ist zu sehen, was passiert, wenn onLoad startet. Referenzen

: jQuery Tutorial on Multiple $(document).ready()

+0

+1 für den Link. Das ist genau das, was ich sehen musste. – morpheous

-1

Wenn Sie js Code-Schnipsel auf verschiedenen Seiten wiederverwenden möchten, können Sie die view.yml Konfigurationsdatei in jedem Ihrer Module wie diese verwenden:

firstActionSuccess: 
    javascripts: [js1.js, js2.js] 
secondActionError: 
    javascripts: [js1.js, js3.js] 
Verwandte Themen