jext
v0.4.3
Published
Javascript ex DOM templater
Downloads
167
Maintainers
Readme
JEXT - Javascript ex DOM templater
JEXT is tool for using html templates as JS files with DOM rendered elements and special helper to manipulate real time data updates.
Installing
To install JEXT you have to just run npm in your project dir:
npm install jext ---save-dev
Usage
Sample usage with bin tool
You have test.html example template. To build it just use jext bin tool:
./bin/jext examples/simple.jext > templates.js
Now merge jext.js lib with generated template
cat ./jext.js templates.js > bundle.js
Well you can do same as above with one command:
./bin/jext examples/simple.jext -b > bundle.js
Finally require in browser just created the bundle.js file. You got jext variable defined with template pool manipulation helpers and templates variable with your template.
Now just get rendered DOM and append to any element. The key of template same as file name without extension.
var t = templates.get('simple');
document.body.appendChild(t.dom());
Wanna update some parameters? Easy:
t.update({welcome_text: 'JEXT works!'});
Now you can see rendered test template on your screen.
Usage with webpack or whatever
First install loader for webpack. Instruction read here: (https://www.npmjs.com/package/jext-loader).
Install stuff:
npm install jext
npm install jext-loader
Somewhere in your code write to render
# First require dependencies
var jext = require('jext');
var simple_tpl = require('examples/simple.jext');
# Make pool of templates, really only one now
var pool = jext.pool(simple_tpl);
# Fetch template and render
var t = pool.get('simple')
document.body.appendChild(t.dom());
t.update({welcome_text: 'JEXT works!'});
Build your project and enjoy!
Template markup
You can use only simple constructs in your html template.
Variables
Just use {{ var_name }} in attribute or inside element to make it works.
<div title="{{ title }}">{{ body }}</div>
Iteration
When making iteration inside template JEXT switching context inside iterated object. So only possible to access object variables of current iterated item.
{
"rows": [
{"value": 1},
{"value": 2}
]
}
<div for="rows">
The value is: {{ value }}
</div>
You know what will be as result? :)
Condition
Condition switches context as iteration. Its same easy to use.
{
"first": false,
"second": {
"value": 2
}
}
<div if="first">
First block wont appear here
</div>
<div if="second">
In context of second condition: {{ value }}
</div>
Template pool methods
get(template, data)
Return template object from pool of available templates using the template key.
- template - name of template. If your template name as mytemplate.jext it must be mytemplate (without extension).
- data - optional. Pass data to render your template as object.
release(template, instance)
It releases generate template from DOM tree
- template - name of template.
- instance - generated Node of this template.
Template object methods
When you get template from created pool, it has several methods to manipulate it.
dom()
The method returns generated DOM tree for current template as DocumentFragment (see document.createDocumentFragment).
update(data)
- data - object to update and rerender current loaded template's DOM.
remove()
This method removes rendered element from DOM tree.
Loaders for JEXT
Webpack: (https://www.npmjs.com/package/jext-loader).