2010-08-21 14 views
10

Korzystam ze struktury aplikacji internetowych (Symfony 1.3.6), która jest zgodna ze wzorcem MVC.

Warstwa widoku składa się z dekoratora szablonu. Plik szablonu może również zawierać inne szablony - oto, co powoduje moje pytanie.

Zakładając, że istnieje strona (nazwijmy go „strona”), która składa się z kilku szablonów - (kod został refactored się więc „szablony podrzędne” mogą być wykorzystywane na innych stronach

.

W wyniku refaktoryzacji małe szablony - używane przez główny szablon - ("strona główna" w naszym przykładzie) muszą zawierać kod związany z jQuery:

pozwala na to, że szablon strony głównej używa 2 'sub szablony:

  • Szablon A
  • szablon B

Zakładamy, że szablon A składa się z poniższym fragmencie:

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

Zakładamy, że szablon B składa się z poniższym fragmencie:

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

teraz szablonu 'głównej' wygląda tak:

<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> 

Próbowałem tego - i ku mojemu zdziwieniu, działało to tak, że był tylko jeden $ (dokument) .ready() w scalonej, końcowej stronie ("strona główna).

Nie jestem pewien, czy moja przeglądarka (Firefox), czy framework sieciowy (Symfony) dokonały "czyszczenia" za kulisami.

Moje pytanie brzmi: jaki jest najlepszy sposób postępowania, jeśli chcesz ograniczyć funkcję jQuery do "małych szablonów wielokrotnego użytku", które można ponownie wykorzystać w celu zapewnienia tej samej funkcjonalności na różnych stronach?

BTW, mam nadzieję, że nikt nie sugeruje pisania wtyczki jQuery, ponieważ to nie jest to, o czym mówię.

+0

Czy to znaczy, że masz scalony wywołanie funkcji lub, że tylko jedno pole ma swoje zdarzenie click? Jeśli chcesz mieć pewność co do czyszczenia firefox, spróbuj wget, twoja strona nie zostanie zmodyfikowana. – greg0ire

Odpowiedz

13

Nie ma Problemy z wieloma połączeniami $(document).ready(), tylko kilka zastrzeżeń:

  • Zmniejszona czytelność.
  • Zakres: funkcja/zmienna/obiekt zadeklarowany wewnątrz jednego $(document).ready() nie będzie widoczny w żadnym innym. Zobacz ten prosty demo.

zobaczyć także ten poprzednie pytanie na SO:

+0

+1, dobry punkt dotyczący zakresu. –

+0

jsut teraz dowiedział się o jsfiddle. dzięki =) – Galen

5

Rzeczywiście można użyć dowolnej liczby instancji $(document).ready() na stronie, jak chcesz. Możesz grupować bloki kodu inicjalizacji w dowolny sposób, który ma największy sens dla aplikacji. To, co zyskujesz na elastyczności, może nieco stracić na wyrazistości, ponieważ nie jest już tak łatwo zobaczyć, co się stanie, gdy uruchomisz OnLoad.

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

+0

+1 dla linku. TO DOKŁADNIE to, co musiałem zobaczyć. – morpheous

-1

Jeśli chcesz ponownie użyć fragmenty kodu js na różnych stronach, można użyć view.yml plik konfiguracyjny w każdym z modułów tak:

firstActionSuccess: 
    javascripts: [js1.js, js2.js] 
secondActionError: 
    javascripts: [js1.js, js3.js] 
Powiązane problemy