Szerver oldali JavaScript

8. hét

Templating, Grunt deployment

Hogyhogy diák?

Így lehet a legegyszerűbben általános elmesélni, aztán megnézzük a gyakorlatban is.

Templating

Vannak változók, van HTML, öntsük össze úgy a kettőt, hogy ne törjön össze semmi (html megfelelő maradjon, karakterek jól jelenjenek meg, sortörések, speciális karakterek, stb).

Sok motor van, mi most az ejs-t nézzük meg.

Telepítés

npm i ejs --save

Package: https://www.npmjs.com/package/ejs

Nézzük meg express nélkül!

var ejs = require('ejs');
var fs = require('fs');

var html = ejs.render(fs.readFileSync('valami.ejs','utf8'), {
  nev:'Lorem ipsum',
  ertek: 2
});
console.log(html);

A valami.ejs:

<% if (ertek >= 2) { %>
    <h2><%= nev %></h2>
<% } %>

Az eredmény:

<h2>Lorem ipsum</h2>

Expressben

Betöltés:

app.set('view engine', 'ejs');        //se require, se semmi

Renderelés:

function (req, res, next) {
  res.render('valami',{        // nem kell .ejs
    nev:'Lorem ipsum',
    ertek: 2
});

Ugye hogy egyszerű...

Használható tagek

Control flow

<% valami.javascript.code(); %>
ez is htm
<% if (valami) { %>
    ez html
<% } %>
<% for (key in array) { var item = array[key]; %>
    <h2><%= item.valami %></h2>
<% } %>

NE legyen itt a logika, itt CSAK ifeket és forokat, foreacheket szeretnék látni...

Használható tagek

Escapelt html (<> karakterek, stb)
<%= valtozo %>
Escape nélküli érték
<%- valtozo %>
Comment
<%# ide barmi johet nem csak kod %>

Strukturálisan

Include!!! Ez működik, csak át kell adni az értékeket értelmesen.

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}) %>
  <% }); %>
</ul>

user/show.ejs -ben a user értelmezett változó, más nem kerül átadásra. Ha minden kell, akkor a második paraméter elhagyásával minden utazik.

Strukturálisan

Egy jó ejs layout:

<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

Minden más

https://github.com/mde/ejs/blob/master/docs/syntax.md

De csak ésszel!