در این مقاله می خواهیم درمورد موتور قالب Vash و چگونگی استفاده ازش در فریمورک Express.js صحبت کنیم.
Vash یک موتور view قالب هست که از سینتکس Razor استفاده میکنه. بنابراین این موتور قالب برای افرادی که تجربه ی کار با ASP.Net MVC رو دارند, آشناست.
نصب و راه اندازی
برای نصب اون کافیه با استفاده از NPM دستور زیر رو اجرا کنید :
npm install vash --save
حالا, بیایید ببینیم چطور به سادگی موتور قالب Vash رندر میگیره.
اول از همه فایل index.vash رو داخل پوشه views بسازید و محتوای زیر رو داخلش قرار بدید :
<!DOCTYPE html>
<html>
<head>
<title>@model.title</title>
</head>
<body>
<p>@model.content</p>
</body>
</html>
در قالب vash بالا, آبجکت مدل model@ هست و پراپرتی های اون شامل title و content میشه. model@ یک سینتکس razor هست که در واقعی آبجکتی هست که قراره از طرف سرور وقتی که view رندر میشه, اطلاعاتی داخلش قرار بگیره و از این اطلاعات بتونید داخل view استفاده کنید. بنابراین قالب بالا انتظار دریافت دو آبجکت با نام های title و content رو داره.
حالا فایل server.js رو ساخته و کد express.js زیر رو داخلش بنویسید تا قالب vash رندر بشه :
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..');
});
همینطور که مشاهده می کنید ما یک آبجکت با پراپرتی های title و content در متد ()res.render و هنگام رندرگیری index.vash ارائه کردیم. حالا اپلیکیشن بالا رو با استفاده از دستور node server.js اجرا کنید و مرورگرتون رو با آدرس localhost:5000 باز کنید. نتیجه ی زیر رو مشاهده خواهید کرد :
صفحه ی Layout
صفحه ی Layout شامل بخش های ثابت اپلیکیشن شماست (مثل صفحات template که در لاراول استفاده می کنیم), بخش هایی که در سراسر اپلیکیشن شما باقی می مانند - مثل هدر و فوتر. این یک مکانیسمی رو فراهم میکنه تا بتونید محتوای داینامیک رو داخل بخش های تعیین شده از قالب استاتیک قرار بدید.
موتور vash به شما اجازه میده صفحه layout رو بسازید. در ادامه یک صفحه ساده layout برای vash به نام layout.vash می نویسیم :
<!DOCTYPE html>
<html>
<head>
<title>@model.title</title>
</head>
<body>
@html.block('body')
</body>
</html>
در کد بالا ('html.block('body@ یک بلاک به نام "body" تعریف میکنه (شبیه yield در لاراول). بنابراین هر قالب vash میتونه داخل این بلاک تزریق بشه. برای مثال, فایل index.vash زیر یک قطعه کد Html داخل بلاک body فایل layout.vash تزریق کرده :
@html.extend('layout',function(model){
@html.block('body',function(model){
<h1>@model.title</h1>
<p>@model.content</p>
});
});
حالا با استفاده از کد زیر اون رو رندر بگیرید :
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 رو اجرا کنید و نتیجه رو مشاهده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید