Add client side ejs compiled with express middleware example

2026-01-09 07:27:56 -05:00 · 2018-11-19 01:06:41 +07:00
parent 720ab7f4d6
commit 5a1229b35b
4 changed files with 71 additions and 0 deletions
--- a/examples/express/README.md
+++ b/examples/express/README.md
@@ -0,0 +1,5 @@
+```
+npm install
+npm start
+open http://localhost:3000
+```
--- a/examples/express/app.js
+++ b/examples/express/app.js
@@ -0,0 +1,27 @@
+var express = require('express');
+var path = require('path');
+var ejs = require('ejs');
+
+var app = express();
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'ejs');
+
+function compileEjsTemplate(name, template) {
+  const compiledTemplate = ejs.compile(template, {
+    client: true,
+    outputFunctionName: name
+  });
+  return function compileEjsTemplate(req, res, next) {
+    res.locals.compiledEjsTemplates = res.locals.compiledEjsTemplates || {};
+    res.locals.compiledEjsTemplates[name] = compiledTemplate.toString();
+    return next();
+  }
+}
+
+app.use(compileEjsTemplate('helloTemplate', "Hello <%= include('messageTemplate', { person: 'John' }); %>"));
+app.use(compileEjsTemplate('messageTemplate', "<%= person %> now you know <%= fact %>."));
+app.use('/', function(req, res, next) {
+  return res.render('index', {});
+});
+
+app.listen(process.env.PORT || 3000);
--- a/examples/express/package.json
+++ b/examples/express/package.json
@@ -0,0 +1,11 @@
+{
+  "description": "client side ejs compiled with express middleware",
+  "main": "app.js",
+  "scripts": {
+    "start": "node ./app.js"
+  },
+  "dependencies": {
+    "ejs": "^2.6.1",
+    "express": "~4.16.0"
+  }
+}
--- a/examples/express/views/index.ejs
+++ b/examples/express/views/index.ejs
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ejs client-side</title>
+  </head>
+  <body>
+    <div id="greeting"></div>
+    <script>
+      const helloTemplateFn = <%- compiledEjsTemplates.helloTemplate %>;
+      const messageTemplateFn = <%- compiledEjsTemplates.messageTemplate %>;
+
+      (function() {
+        const includeFn = function(path, data) {
+          if (path === 'messageTemplate') {
+            return messageTemplateFn({
+              fact: 'how to render a page with compiled ejs templates',
+              person: data.person
+            });
+          }
+        };
+
+        const html = helloTemplateFn({}, null, includeFn, null);
+        const $greeting = document.getElementById('greeting');
+        $greeting.innerHTML = html;
+      })();
+    </script>
+  </body>
+</html>