s2/ejs-render-remote
1
0
Fork 0
mirror of https://github.com/S2-/ejs-render-remote synced 2025-08-02 04:30:04 +02:00
Code Issues Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
s2
2019-04-14 18:09:30 +02:00
commit fa31457779
7 changed files with 142 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
README.md Normal file
View File

@@ -0,0 +1,31 @@
# ejs-render-remote
[ejs](https://ejs.co/) remote client side includes.
## Quick start
1. Include this script
```html
<script src="node_modulse/ejs-render-remote/ejs-render-remote.js"></script>
```
2. Creare a file with your template, for example `templates/hello-world.ejs` containing `hello <%= name %>!`
3. Render the remote template:
```js
someDomelement.outerHTML = ejs.rr('templates/hello-world.ejs', {name: 'Simon'});
```
## Examples
See `examples` folder.
## api
### ejs.rr(templateUrl, data)
`ejs.rr` (render remote) renders the remote template. It makes an ajax call to fetch the template and then `ejs.render`s it.
The resulting ejs template function is cached, so the second time this function is invoked for that same template, `ejs.rr` returns the rendered template synchronously.
### ejs.preloadTemplate(templateUrl)
Since `ejs.rr` is async, you can call `ejs.preloadTemplate` before invoking `ejs.rr` to warm the template chace up for that `templateUrl`.
By doing so the call to `ejs.rr` will return the rendered template string right away.

73
ejs-render-remote.js Normal file
View File

@@ -0,0 +1,73 @@
//this uses jQuery for now because ie11 support is needed (promises and fetch)
(function($) {
var uuidv4 = function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0;
var v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
};
ejs.rr = function(templateUrl, data) {
var templateFn = ejs.cache.get(templateUrl);
//if the template is already cached, return it and we are done
if (templateFn) {
//but first check if there is still a getter function for this template in the cache
//if yes, remove it so we clean up a bit
if (ejs.cache.remove && ejs.cache.get('getFnFor' + templateUrl)) {
ejs.cache.remove('getFnFor' + templateUrl);
}
return templateFn(data);
} else { //if the template is not cached, we need to get it and render it later once we have it. remember: this happens only if the template is not already cached
//is there a getFn for this template?
var getTemplateFn = ejs.cache.get('getFnFor' + templateUrl);
if (!getTemplateFn) {
getTemplateFn = $.get(templateUrl);
ejs.cache.set('getFnFor' + templateUrl, getTemplateFn);
}
var r = uuidv4();
getTemplateFn.then(function(template) {
document.getElementById(r).outerHTML = ejs.render(
template,
data,
{
cache: true,
filename: templateUrl
}
);
});
return '<span class="ejs-templateplaceholder" style="display: none;" id="' + r + '"></span>';
}
};
ejs.preloadTemplate = function(templateUrl) {
var d = $.Deferred();
//if the template is already cached, just return.
if (ejs.cache.get(templateUrl)) {
d.resolve();
} else {
$.get(templateUrl)
.then(function(template) {
var templateFn = ejs.compile(template,
{
cache: true,
filename: templateUrl
});
ejs.cache.set(templateUrl, templateFn);
d.resolve();
});
}
return d;
}
})(jQuery);

1
examples/ejs.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

23
examples/index.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ejs-render-remote example</title>
</head>
<body>
<h1>ejs-render-remote example</h1>
<p class="hello"></p>
<script src="jquery.min.js"></script>
<script src="ejs.min.js"></script>
<script src="../ejs-render-remote.js"></script>
<script>
//render the template
$('.hello').html(ejs.rr('templates/hello.ejs', {name: 'Simon'}));
</script>
</body>
</html>

2
examples/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/templates/hello.ejs Normal file
View File

@@ -0,0 +1 @@
Hello <%= name%>!

11
package.json Normal file
View File

@@ -0,0 +1,11 @@
{
"name": "ejs-render-remote",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}