One place for hosting & domains

      Использование EJS для преобразования приложения Node в шаблон


      Введение

      При быстром создании приложений Node часто бывает необходим удобный и быстрый способ преобразовать приложение в шаблон.

      Jade используется по умолчанию как механизм просмотра для Express, но синтаксис Jade может быть чрезмерно сложным для многих моделей использования. EJS — один из альтернативных вариантов, удобный в настройке и позволяющий хорошо выполнить эту работу. Давайте посмотрим, как создать простое приложение и использовать EJS, чтобы включить повторяющиеся части нашего сайта (частичные элементы) и передать данные в представления.

      Настройка демонстрационного приложения

      Мы сделаем для нашего приложения две страницы, одну страницу полной ширины, а другую — с боковой панелью.

      Получите код: Репозиторий git с полным кодом демонстрации можно найти на GitHub здесь.

      Структура файлов

      Это файлы, которые нам требуются для нашего приложения. Мы создадим шаблоны в папке views, а затем будем следовать стандартным практикам Node.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json будет содержать информацию нашего приложения Node и необходимые нам зависимости (express и EJS), а server.js будет содержать настройку, конфигурацию сервера Express. Здесь мы определим маршруты к нашим страницам.

      Настройка узла

      Давайте откроем файл package.json и настроим в нем наш проект.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Нам потребуются только Express и EJS. Теперь нам нужно установить зависимости, которые мы только что определили. Вперед:

      Установив все зависимости, настроим приложение для использования EJS и настроим маршруты для двух страниц, которые нам нужны: страницы индекса (полная ширина) и информационной страницы (боковая панель). Мы будем делать это в файле server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Здесь мы определим наше приложение и зададим для него отображение на порту 8080. Также нам нужно задать EJS как механизм просмотра для нашего приложения Express с помощью app.set('view engine', 'ejs'); Обратите внимание, как мы отправляем представление пользователю, используя res.render(). Важно отметить, что res.render() будет искать представление в папке views. Это значит, что нам нужно определить только pages/index, поскольку полный путь выглядит как views/pages/index.

      Запуск сервера

      Запустите сервер с помощью следующей команды:

      Теперь мы можем открыть наше приложение в браузере, используя адреса http://localhost:8080 и http://localhost:8080/about. Мы настроили наше приложение, и нам нужно определить файлы представления и посмотреть, как EJS работает с ними.

      Создание частичных элементов EJS

      Как и в других приложениях здесь будет много кода, используемого многократно. Мы назовем такие элементы частичными шаблонами и определим три файла, которые будут использоваться везде на нашем сайте: head.ejs, header.ejs и footer.ejs. Создадим эти файлы.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Добавление частичных шаблонов EJS в представления

      Итак, мы определили частичные шаблоны. Теперь нужно добавить их в наши представления. Возьмем файлы index.ejs и about.ejs и используем синтаксис include для добавления частичных шаблонов.

      Синтаксис добавления частичного шаблона EJS

      Используйте <%- include('RELATIVE/PATH/TO/FILE') %>, чтобы встроить частичный шаблон EJS в другой файл.

      • Дефис <%- вместо <% предписывает EJS выполнять рендеринг необработанного кода HTML.
      • Путь к частичному шаблону является относительным по отношению к текущему файлу.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Теперь мы можем посмотреть определенное представление в браузере по адресу http://localhost:8080. node-ejs-templating-index

      Для информационной страницы мы также добавим загрузочную боковую панель, чтобы продемонстрировать, как частичные шаблоны можно структурировать для использования с разными шаблонами и страницами.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Если мы откроем адрес http://localhost:8080/about, мы увидим нашу информационную страницу с боковой панелью! node-ejs-templating-about

      Теперь мы можем начать использовать EJS для передачи данных из нашего приложения Node в наши представления.

      Передача данных в представления и частичные шаблоны

      Определим некоторые базовые переменные и список для передачи на главную страницу. Вернитесь в файл server.js и добавьте следующий код в маршрут app.get("https://www.digitalocean.com/").

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Мы создали список mascots и простую строку tagline. Теперь перейдем в файл index.ejs и используем их.

      Рендеринг одиночной переменной в EJS

      Чтобы отразить через эхо одну переменную, мы просто используем <%= tagline %>. Добавим этот код в наш файл index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Циклический перебор данных в EJS

      Для циклического перебора данных мы будем использовать .forEach. Добавим этот код в наш файл view:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Теперь мы можем видеть в браузере новую информацию, которую мы добавили!

      node-ejs-templating-rendered

      Передача данных в частичный шаблон в EJS

      Частичный шаблон EJS имеет доступ к тем же данным, что и родительское представление. Будьте внимательны: если вы ссылаетесь на переменную в частичном шаблоне, ее нужно определить в каждом представлении, использующем частичный шаблон, или приложение выдаст ошибку.

      Также вы можете определять и передавать переменные в частичный шаблон EJS, используя синтаксис include:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      При этом нужно с осторожностью предполагать, что переменная определена.

      Если вы хотите использовать в частичном шаблоне ссылку на переменную, которая может быть не определена, и присвоить ей значение по умолчанию, вы можете сделать это так:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      В строке выше код EJS выполняет рендеринг значения variant, если оно определено, и default, если не определено.

      Заключение

      EJS позволяет быстро создавать приложения, когда нам не нужно ничего сложного. С помощью частичных шаблонов и возможности легко передавать переменные в представления мы можем быстро создавать отличные приложения.

      Дополнительную справку по EJS можно найти в официальной документации здесь.



      Source link

      Настройка проекта Node с помощью Typescript


      Введение

      Node — это среда исполнения, позволяющая писать серверный код JavaScript. Она получила очень широкое распространение после своего выпуска в 2011 году. С ростом базы кода написание серверного кода JavaScript может представлять сложности в связи с характером языка JavaScript: динамичным и слабо типизированным.

      Разработчики, переходящие на JavaScript с других языков, часто жалуются на отсутствие мощного статического типирования, но TypeScript позволяет устранить этот недостаток.

      TypeScript — это типовой (опциональный) супернабор JavaScript, который может помочь со сборкой и управлением крупномасштабными проектами JavaScript. Его можно представить как JavaScript с дополнительными возможностями, включая мощное статическое типирование, компиляцию и объектно-ориентированное программирование.

      Примечание. С технической точки зрения TypeScript является супернабором JavaScript, и это означает, что весь код JavaScript является корректным кодом TypeScript.

      Перечислим некоторые преимущества использования TypeScript:

      1. Опциональная статическая типизация.
      2. Логическая обработка типов.
      3. Возможность использования интерфейсов.

      В этом учебном модуле вы настроите проект Node с помощью TypeScript. Вы создадите приложение Express с помощью TypeScript и преобразуете его в компактный и надежный код JavaScript.

      Предварительные требования

      Перед началом прохождения этого модуля вам нужно будет установить Node.js на вашем компьютере. Для этого можно выполнить указания руководства Установка Node.js и создание локальной среды разработки для вашей операционной системы.

      Шаг 1 — Инициализация проекта npm

      Для начала создайте новую папку с именем node_project и перейдите в этот каталог.

      • mkdir node_project
      • cd node_project

      Затем инициализируйте его как проект npm:

      После запуска npm init вам нужно будет передать npm информацию о вашем проекте. Если вы разрешите npm принимать ощутимые значения по умолчанию, вы можете добавить флаг y, чтобы пропустить диалоги с запросом дополнительной информации:

      Теперь пространство вашего проекта настроено, и вы можете перейти к установке необходимых зависимостей.

      Шаг 2 — Установка зависимостей

      Следующий шаг после инициализации базового проекта npm — установить зависимости, требующиеся для запуска TypeScript.

      Запустите следующие команды из каталога вашего проекта для установки зависимостей:

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      Флаг -D — сокращенное обозначение опции: --save-dev. Более подробную информацию об этом флаге можно найти в документации npmjs.

      Пришло время установить платформу Express:

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      Вторая команда устанавливает типы Express для поддержки TypeScript. Типы в TypeScript — это файлы, которые обычно имеют расширение .d.ts. Файлы используются для предоставления типовой информации об API, в данном случае структуры Express.

      Этот пакет требуется, потому что TypeScript и Express являются независимыми пакетами. Без пакета @types/express у TypeScript нет способа узнавать типы классов Express.

      Шаг 3 — Настройка TypeScript

      В этом разделе мы настроим TypeScript и проверку соблюдения стандартов для TypeScript. TypeScript использует файл tsconfig.json для настройки опций компилятора для проекта. Создайте файл tsconfig.json в корне каталога проекта и вставьте следующий фрагмент кода:

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Давайте рассмотрим некоторые ключи во фрагменте кода JSON выше:

      • module: указывает метод генерирования кода модуля. Node использует commonjs.
      • target: указывает уровень языка на выходе.
      • moduleResolution: помогает компилятору определить, на что ссылается импорт. Значение node имитирует механизм разрешения модуля Node.
      • outDir: Это место для вывода файлов .js после транспиляции. В этом учебном модуле мы сохраним его как dist.

      В качестве альтернативы созданию и заполнения файла tsconfig.json вручную можно запустить следующую команду:

      Эта команда сгенерирует файл tsconfig.json с правильными комментариями.

      Чтобы узнать больше о доступных опциях ключ-значение, можно использовать официальную документацию TypeScript, где приводятся разъяснения всех опций.

      Теперь вы можете настроить проверку соответствия стандартам кода TypeScript для этого проекта. Откройте в терминале корневой каталог вашего проекта, который установлен в этом учебном модуле как node_project, и запустите следующую команду для генерирования файла tslint.json:

      • ./node_modules/.bin/tslint --init

      Откройте сгенерированный файл tslint.json и добавьте соответствующее правило no-console:

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      По умолчанию модуль проверки TypeScript предотвращает использование отладки через команды консоли, поэтому нужно явно предписать ему отключить правило по умолчанию no-console.

      Шаг 4 — Обновление файла package.json

      Сейчас вы можете запускать функции в терминале по отдельности или создать скрипт npm для их запуска.

      На этом шаге мы создадим скрипт start, который выполнит компиляцию и транспиляцию кода TypeScript, а затем запустит полученное приложение .js.

      Откройте файл package.json и обновите его соответствующим образом:

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      В приведенном выше фрагменте кода мы обновили путь main и добавили команду start в раздел scripts. Если посмотреть на команду start, вы увидите, что вначале запускается команда tsc, а затем — команда node. При этом будет проведена компиляция, и сгенерированный вывод будет запущен с помощью node.

      Команда tsc предписывает TypeScript скомпилировать приложение и поместить сгенерированный вывод .js в указанном каталоге outDir, как указано в файле tsconfig.json.

      Шаг 5 — Создание и запуск базового сервера Express

      Теперь TypeScript и модуль проверки настроены, и мы можем приступить к сборке модуля Node Express Server.

      Вначале создайте папку src в корневом каталоге вашего проекта:

      Затем создайте файл с именем app.ts:

      На этом этапе структура каталогов должна выглядеть следующим образом:

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Откройте файл app.ts в предпочитаемом текстовом редакторе и вставьте следующий фрагмент кода:

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      Приведенный выше код создает сервер Node, прослушивающий порт 3000 на предмет запросов. Запустите приложение с помощью следующей команды:

      При успешном выполнении сообщение будет зарегистрировано на терминале:

      Output

      • server is listening on 3000

      Теперь вы можете открыть в браузере адрес http://localhost:3000 и увидите следующее сообщение:

      Output

      • The sedulous hyena ate the antelope!

      Окно браузера с сообщением: Усердная гиена съела антилопу!

      Откройте файл dist/app.js, и вы найдете в нем транспилированную версию кода TypeScript:

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      Вы успешно настроили проект Node для использования TypeScript.

      Заключение

      В этом учебном модуле вы узнали, почему TypeScript полезен для написания надежного кода JavaScript. Также вы узнали о некоторых преимуществах работы с TypeScript.

      Наконец, вы настроили проект Node с использованием структуры Express, но скомпилировали и запустили проект с помощью TypeScript.



      Source link

      How To Use EJS to Template Your Node Application


      Introduction

      When creating quick on-the-fly Node applications, an easy and fast way to template our application is sometimes necessary.

      Jade comes as the view engine for Express by default but Jade syntax can be overly complex for many use cases. EJS is one alternative does that job well and is very easy to set up. Let’s take a look at how we can create a simple application and use EJS to include repeatable parts of our site (partials) and pass data to our views.

      Setting up the Demo App

      We will be making two pages for our application with one page with full width and the other with a sidebar.

      Get the code: You can find a git repo of the complete demo code on GitHub here

      File Structure

      Here are the files we’ll need for our application. We’ll do our templating inside of the views folder and the rest is pretty standard Node practices.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json will hold our Node application information and the dependencies we need (express and EJS). server.js will hold our Express server setup, configuration. We’ll define our routes to our pages here.

      Node Setup

      Let’s go into our package.json file and set up our project there.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      All we will need is Express and EJS. Now we have to install the dependencies we just defined. Go ahead and run:

      With all of our dependencies installed, let’s configure our application to use EJS and set up our routes for the two pages we need: the index page (full width) and the about page (sidebar). We will do all of this inside our server.js file.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page 
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page 
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Here we define our application and set it to show on port 8080. We also have to set EJS as the view engine for our Express application using app.set('view engine', 'ejs');. Notice how we send a view to the user by using res.render(). It is important to note that res.render() will look in a views folder for the view. So we only have to define pages/index since the full path is views/pages/index.

      Start Up our Server

      Go ahead and start the server using:

      Now we can see our application in the browser at http://localhost:8080 and http://localhost:8080/about. Our application is set up and we have to define our view files and see how EJS works there.

      Create the EJS Partials

      Like a lot of the applications we build, there will be a lot of code that is reused. We’ll call those partials and define three files we’ll use across all of our site: head.ejs, header.ejs, and footer.ejs. Let’s make those files now.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Add the EJS Partials to Views

      We have our partials defined now. All we have to do is include them in our views. Let’s go into index.ejs and about.ejs and use the include syntax to add the partials.

      Syntax for including an EJS Partial

      Use <%- include('RELATIVE/PATH/TO/FILE') %> to embed an EJS partial in another file.

      • The hyphen <%- instead of just <% to tell EJS to render raw HTML.
      • The path to the partial is relative to the current file.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Now we can see our defined view in the browser at http://localhost:8080. node-ejs-templating-index

      For the about page, we also add a bootstrap sidebar to demonstrate how partials can be structured to reuse across different templates and pages.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      If we visit http://localhost:8080/about, we can see our about page with a sidebar! node-ejs-templating-about

      Now we can start using EJS for passing data from our Node application to our views.

      Pass Data to Views and Partials

      Let’s define some basic variables and a list to pass to our home page. Go back into your server.js file and add the following inside your app.get("https://www.digitalocean.com/") route.

      server.js

      // index page 
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      We have created a list called mascots and a simple string called tagline. Let’s go into our index.ejs file and use them.

      Render a Single Variable in EJS

      To echo a single variable, we just use <%= tagline %>. Let’s add this to our index.ejs file:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Loop Over Data in EJS

      To loop over our data, we will use .forEach. Let’s add this to our view file:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Now we can see in our browser the new information we have added!

      node-ejs-templating-rendered

      Pass Data to a Partial in EJS

      The EJS partial has access to all the same data as the parent view. But be careful: If you are referencing a variable in a partial, it needs to be defined in every view that uses the partial or it will throw an error.

      You can also define and pass variables to an EJS partial in the include syntax like this:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      But you need to again be careful about assuming a variable has been defined.

      If you want to reference a variable in a partial that may not always be defined, and give it a default value, you can do so like this:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      In the line above, the EJS code is rendering the value of variant if it’s defined, and default if not.

      Conclusion

      EJS lets us spin up quick applications when we don’t need anything too complex. By using partials and having the ability to easily pass variables to our views, we can build some great applications quickly.

      For more reference on EJS see the official docs here.



      Source link