Template Inheritance ใน jade template

การสืบทอดคุณสมบัติต่างๆ เป็นวิธีการเขียนโปรแกรมแบบบ Object Oriented ซึ่งทำให้สามารถเขียนโปรแกรมได้รวดเร็ว เพราะสร้างโมดูล หรืองานขึ้นมาชิ้นหนึ่งสามารถนำมาเวียนใช้ได้อีกหลายครั้ง และทำให้เกิดรูปแบบมาตรฐานเดียวกัน

ตัวอย่างง่ายๆ ที่ใช้กันในอดีต ก็คือ เว็บเพจจะแบ่งเป็น ส่วนหัว (Header), ส่วนเนื้อหา (Content) และส่วนท้ายหน้า (Footer) ซึ่งเนื้อหาจะเปลี่ยนหรือแสดงผลในส่วน Content แต่ Header และ Footer จะไม่ค่อยเปลี่ยนแปลง (อาจจะมีเปลี่ยนแปลงบ้าง) โดยแต่ละหน้าจะต้องเหมือนกันถึงจะเกิดความสวยงาม

ใน jade ก็เช่นกัน สามารถสืบทอดจากหน้าอื่นมาไว้ในหน้าของงานใดๆ ก็ได้ และมีวิธีการที่ไม่ซับซ้อน สามารถทำความเข้าใจได้ง่ายๆ

ก่อนอื่นที่จะเริ่มไปเขียนงานที่ซับซ้อนเราต้องเข้าใจโครงสร้างของ template เสียก่อน จะทำให้งานง่ายขึ้นและแก้ไข เพิ่มเติมได้ง่ายขึ้นตามไปด้วย

ตัวอย่างที่จะพูดถึงวันนี้ประกอบด้วย ไฟล์ layout.jade, index.jade และ main.jade

• layout.jade จะเป็นไฟล์โครงสร้างเริ่มต้นของระบบ
• index.jade เป็นหน้าหลักของ / จะเรียกใช้งาน layout.jade ผ่านคำสั่ง extends layout
• maint.jade เป็นอีกหน้าหนึ่ง /main จะเรียกใช้งาน layout.jade ผ่าน index.jade อีกครั้งหนึ่ง โดยจะเรียกด้วยคำสั่ง extends layout และ extends index ตามลำดับ

ภายใน layout จะกำหนดโครงสร้างไว้เป็น block เช่น block header, block script, block content และ block footer การใช้งาน block ในไฟล์ jade อื่นๆ จะมี 3 แบบ คือ Replace, Append และ Prepend

Replace 

การเรียกใช้ Block แบบ Replace จะแทนที่ข้อมูลใน Block เดิมด้วย ข้อมูลในที่เรียกใช้งานล่าสุด เช่น

layout.jade

...

block content

    p Content from layout.jade

...

index.jade

extends layout

block content

    p Content from index.jade

เมื่อสั่งรันเว็บเพจแล้วหน้าจอจะแสดงข้อความ Content from index.jade เพราะเป็นการเรียกแบบ Replace

Append

การเรียกแบบ Append จะไปต่อท้าย Block ที่เรียก เช่น

index.jade

extends layout

block append content

    p Content from index.jade

เมื่อสั่งรันหน้าเว็บแล้วจะมีข้อความสองบรรทัด คือ 

Content from layout.jade 

Content from index.jade

Prepend

การเรียกแบบเพิ่มในบรรทัดแรกของ Block

index.jade

extends layout

block prepend content

    p Content from index.jade

เมื่อสั่งรันเว็บเพจจะได้ข้อความสองบรรทัดกลับกันกับ append คือ

Content from index.jade 

Content from replace.jade

หน้าจอการเรียกใช้ block แบบต่างๆ

หน้าจอที่ได้จาก index.jade (2) โดยเรียก layout.jade (1) ตอนเริ่มต้น

หน้าจอ main.jade (3, 4) เรียกใช้ layout.jade (1) และ index.jade (2) ในตอนแรกของไฟล์

อธิบายเพิ่มเติมการเรียกจากส่วนต่างๆ ตามลำดับตัวเลขในวงเล็บ

รายละเอียดใน View source page ทำให้มองเห็นลำดับได้ง่ายขึ้น

จากข้อมูลและรูปภาพข้างบนจะเห็นได้ว่า jade template นั้นง่ายต่อการใช้งาน และเรียกใช้จากเว็บอื่นๆ ได้ง่ายตามไปด้วย


ตัวอย่าง Source code:

app.js

var express = require('express'); 

var app = express(); 

// Set template path and render engine, not necessary.
app.set('views', __dirname + '/views'); 

app.set('view engine', 'jade'); 

app.locals.pretty = true; 

app.get('/', function(req, res) { 

  res.render('index.jade');}); 

  app.get('/main', function(req, res){ 

  res.render('main.jade'); 

}); 

// Start server 

app.listen(3030);

layout.jade

!!!html 

head 

  block stylesheet 

  block script      

      script <!-- script from layout.jade (1) -->  

body    

  block content 

  h1 Hello from layout.jade (1)

index.jade

extends layout 

block stylesheet 

  <!-- Overwrite to block stylesheet (2) -->  

  link(href='bootstrap.min.css' rel='stylesheet') 

block prepend script  

  script <!-- prepend to [block script](2) --> 

block append content   

  h2 Hello from index.jade (2, append)

main.jade

extends layout 

extends index 

block append content  

  p Append from main.jade (3, append) 

block prepend content 

  p Prepend from main (4, prepend)

--------------------

อ้างอิง:
สามารถเข้าไปดูตัวอย่างได้ที่:
http://runnable.com/Umoh1jpWr_o6ABKm/extends-and-blocks-in-jade-for-node-js