จาก forum ที่ถามเรื่องการใช้ Smarty + Ajax ทำให้ผมจับประเด็นได้อย่างหนึ่ง สำหรับคนที่เพิ่งเริ่มใช้ smarty หรือยังสแกนอ่าน manual ไม่หมด ทำให้ไม่รู้ว่าใน smarty นั้นมี function {literal} เอาไว้สำหรับให้ smarty ข้าม code ที่อยู่ใน {literal} นี้ ในกรณีที่เราอยากจะเขียน code ต่างๆ ที่อาจจะไป match กับ syntax ของ smarty แต่ไม่อยากให้ smarty มา compile เช่นการเขียน code java script ใน smarty template เป็นต้น

ปกติ basic syntax ของ smarty template นั้น tag ของ smarty จะขึ้นต้นด้วย { และจบด้วย } (นอกจากคุณจะเซตให้เป็นอย่างอื่น) ตัวอย่างเช่น

ตัวอย่างที่ 1: Smarty Template อย่างง่าย

 

  3. <title>Hello Smarty!</title>
  4. </head>
  5.  
  7. {if $name}
  8. Hello, K.{$name}.
  9. {else}
  10. Hello, K.Noname.
  11. {/if}
  12. </body>
  13. </html>

 

แต่กรณีที่ใน smarty template ของคุณมี code ของ java script เช่น

ตัวอย่างที่ 2: มี code java script ใน Smarty Tempalte

 

  3. <title>Hello Smarty!</title>
  4. <script type="text/javascript">
  5. function myAlert(name)
  6. {
  7. if(name)
  8. {
  9. alert("Hello again, K." name ".");
  10. }
  11. else
  12. {
  13. alert("Hello again, K.Noname.");
  14. }
  15. }
  16. </script>
  17. </head>
  18.  
  20. {if $name}
  21. Hello, K.{$name}.
  22. {else}
  23. Hello, K.Noname.
  24. {/if}
  25.  
  26. <script type="text/javascript">
  27. myAlert("{$name}");
  28. </script>
  29. </body>
  30. </html>

ในตัวอย่างที่ 2 นี้ ถ้านำ template นี้ไปใช้เลย ก็จะเจอ Error

 

Fatal error: Smarty error: [in tplName.html line 6]: syntax error: unrecognized tag: if(name) ...

นั่นเพราะว่า smarty กำลังจะ compile code java script ของเรา ซึ่งแน่นอน ไม่เกิด error ที่ใด ก็ต้องที่หนึ่งค่อนข้างแน่

วิธีแก้ไข

ก็คือ ไม่ต้องให้ smarty compile code ตรงส่วนนี้ โดยใส่ {literal} คล่อม ตรง code ที่ไม่ต้องการให้ compile เช่น

 

  3. <title>Hello Smarty!</title>
  4. {literal}
  5. <script type="text/javascript">
  6. function myAlert(name)
  7. {
  8. if(name)
  9. {
  10. alert("Hello again, K." + name + ".");
  11. }
  12. else
  13. {
  14. alert("Hello again, K.Noname.");
  15. }
  16. }
  17. </script>
  18. {/literal}
  19. </head>
  20.  
  22. {if $name}
  23. Hello, K.{$name}.
  24. {else}
  25. Hello, K.Noname.
  26. {/if}
  27.  
  28. <script type="text/javascript">
  29. myAlert("{$name}");
  30. </script>
  31. </body>
  32. </html>

สังเกตุดูตรง line ที่ 4 และ 18 ว่าเราคล่อม code java script ด้วย {literal} ไว้แล้ว และเราไม่ไปคล่อมใน line ที่ 28-30 ซึ่งก็เป็น code java script เช่นกัน เพราะว่า ใน line 29 นั้น มี smarty tag อยู่ ซึ่งเราอยากให้ smarty compile ให้ และทั้งนี้ ทั้งนั้น ใน line ที่ 28-30 ไม่มี code ที่ผิด syntax ของ smarty ด้วย

 

และมาดูอีกกรณีหนึ่ง

ตัวอย่างที่ 3: มี code smarty ปนกันกับ code java script

 

  3. <title>Hello Smarty!</title>
  4. <script type="text/javascript">
  5. {literal}
  6. function myAlert()
  7. {
  8. {/literal}
  9. var name = "{$name}";
  10. {literal}
  11. if(name)
  12. {
  13. alert("Hello again, K." + name + ".");
  14. }
  15. else
  16. {
  17. alert("Hello again, K.Noname.");
  18. }
  19. }
  20. {/literal}
  21. </script>
  22. </head>
  23.  
  25. {if $name}
  26. Hello, K.{$name}.
  27. {else}
  28. Hello, K.Noname.
  29. {/if}
  30.  
  31. <script type="text/javascript">
  32. myAlert();
  33. </script>
  34. </body>
  35. </html>

สังเกตุตัวอย่างที่ 3 นี้ การที่มี code smarty ปนกับ code java script อย่างนี้ ซึ่งเราต้องการให้ compile บาง line และบาง line ไม่ต้องการให้ compile เราทำได้โดยใช้ {literal} คล่อมส่วนที่เราไม่ต้องการให้ conpile ดังตัวอย่างที่ 3 เราจะไม่ คล่อม code java script ทั้งหมด แต่คล่อมเป็นส่วนๆ แทน