در ابتدا به منظور نصب کردن Vash از دستور زیر استفاده کنید.
[console]
npm install vash –save
[/console]
حال می توانید نحوه رندر کردن یک Vash Template را با استفاده از Express.js ببینید. در ابتدا یک فایل به نام index.vash را در فولدر views ایجاد کرده و کدی که در قسمت زیر می بینید را در آن قرار بدهید.
<!DOCTYPE html>
<html>
<head>
<title>@model.title</title>
</head>
<body>
<p>@model.content</p>
</body>
</html>
در مثال بالا؛ ما یک Vash Template را ایجاد کرده و model object به صورت @model تعریف شده و سپس property های مربوطه از قبیل title و content را تنظیم کرده‌ایم. در razor syntax معنی @model یک object است که داده ها را برای template فراهم می‌کند. بنابراین در مثال بالا، یک object که دارای دو property به نام‌های title و content می باشد داده‌ها را برای این template فراهم می‌کند.
در ادامه فایل server.js را ایجاد کرده و کدی که در قسمت زیر می بینید را در آن قرار بدهید.
var express = require('express');
var app = express();
app.set("view engine","vash")
app.get('/', function (req, res) {
res.render('index', { title: 'Vash Template Demo',
content:'This is dummy paragraph.'});
});
var server = app.listen(5000, function () {
console.log('Node server is running..');
});
همانطور که می بینید ما یک object که دارای دو property به نام‌های title و content می باشد را در متد res.render لحاظ کرده‌ایم و سپس فایل index.vash را رندر نموده ایم. حال می توانید برنامه را با استفاده از دستور node server.js اجرا کرده و سپس به آدرس http://localhost:5000 بروید و خروجی زیر را دریافت کنید.
بررسی Layout Page
با استفاده از layout page می توانید بخشهای static مربوط به برنامه که در قسمت های مختلف تغییر نمی‌کنند را لحاظ کنید. برای مثال header و footer در این فایل قرار می‌گیرند. در واقع layout page یک مکانیزم برای اضافه کردن محتویات غیر قابل تغییر و یا static را به همراه قسمت های تغییر پذیر و یا dynamic در اختیار ما قرار می‌دهد.
نکته دیگر اینکه vash engine به راحتی اجازه می‌دهد که شما یک layout page را ایجاد کنید. مثالی که در قسمت زیر مشاهده می کنید یک layout page ساده به نام layout.vash را نشان می‌دهد.
<!DOCTYPE html>
<html>
<head>
<title>@model.title</title>
</head>
<body>
@html.block('body')
</body>
</html>
در مثال بالا؛ ما از layout page و همچنین @html.block(‘body’) به منظور تعریف کردن یک قسمت به نام body استفاده کرده ایم. بنابراین هر Vash Template می‌تواند در این قسمت تزریق شود. برای مثال یک فایل دیگر به نام index.vash را می توانیم به درون این قسمت از layout page اضافه کنیم. فایل index.vash را در قسمت زیر ببینید.
@html.extend('layout',function(model){
@html.block('body',function(model){
<h1>@model.title</h1>
<p>@model.content</p>
});
});
حال می توانیم به سادگی layout نهایی را با استفاده از Express.js شبیه به چیزی که در قسمت زیر می بینید رندر کنیم.
var express = require('express');
var app = express();
app.set("view engine","vash")
app.get('/', function (req, res) {
res.render('index', { title: 'Vash Template Demo',
content:'This is dummy paragraph.'});
});
var server = app.listen(5000, function () {
console.log('Server is running..');
});
در ادامه به سادگی با دستور node server.js برنامه را اجرا کرده و به آدرس http://localhost:5000 بروید. خروجی شبیه به تصویر زیر خواهد بود.
منبع: وبسایت پرووید