es-template-renderer
v1.0.2
Published
es-template-renderer
Downloads
49
Readme
es-template-renderer
Simple and extendible templating library using the ECMAScript interpolation syntax.
This library is written in TypeScript, but should be able to target any version of JavaScript and any browser environment that support the features being used.
Targeting the AMD module format.
This is experimental and not a finished product.
Features
- The abillity to hook into the binding and evaluation steps with custom handlers. This enables the implementation of higher order features, such as data-binding. (See "customBinder.ts")
Usage
index.html:
<div id="template">
<h1>${title}</h1>
<p>${description + "!"}</p>
<p>${greet("John Doe")} ${2017}</p>
</div>
index.ts:
import { bind } from "./templating";
const element = document.getElementById("template");
const model = {
description: "Whats up",
greet: (name: string) => `Hello, ${name}!`,
title: "Hey!",
};
bind(element!, model);
That will render this:
<div id="template">
<h1>Hey!</h1>
<p>Whats up!</p>
<p><span>Hello, John Doe!</span> <span>2017</span></p>
</div>
Extendibility
Simple case extending the expression evaluator to cache the generated functions.
import { bindExpression, render } from "./templating";
const cache: any = {};
const customEvaluator = (expr: string, context: any) => {
let f = null;
if (expr in cache) {
f = cache[expr];
} else {
f = new Function("context", `with(context) { return ${expr}; }`);
cache[expr] = f;
}
return f(context);
};
const customBindingHandler = (elem: Element, expr: string, context: any) => {
bindExpression(customEvaluator, elem, expr, context);
// Here shorthand for: elem.innerHTML = customEvaluator(expr, context);
console.log("Handling expression:", expr);
};
export const myBinder = (elem: Element, data: any) => render(elem!, data, customBindingHandler);
Build
Requires Bower.
$ npm install
$ bower install
$ npm run build
Open index.html/index2.html.
TODO
- Write tests
- Revise project structure
Contributions
Feel free to come with contributions and/or suggestions!