Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stevenmhunt/tmpl.loader
Loads external html template files into javascript and renders them using a template engine of your choice.
https://github.com/stevenmhunt/tmpl.loader
Last synced: about 1 month ago
JSON representation
Loads external html template files into javascript and renders them using a template engine of your choice.
- Host: GitHub
- URL: https://github.com/stevenmhunt/tmpl.loader
- Owner: stevenmhunt
- License: other
- Created: 2012-09-11T18:47:34.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2020-12-20T12:52:33.000Z (about 4 years ago)
- Last Synced: 2023-03-29T04:16:46.674Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 16
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: MIT-LICENSE.txt
Awesome Lists containing this project
README
tmpl.loader: Simple Template Loading and Rendering
=================================================
**Version 0.2**
*Loads external template files and renders them with a template engine in JavaScript.*
Features
--------
Allows templates to be broken out into seperate files.
Supports multiple template engines side-by-side on a single page.
Works with jQuery... or not. Your choice.
Notifies your javascript code when templates have loaded with the ready() callbacks.
Supported Templating Engines
----------------------------
- jsRender
- jSmart
- Handlebars
- Mustache
- Plates
- IST
- doT
- More to come...!
How To Use
----------
1) Add your template file as a link:
```html
```
Note that the name of the template is automatically extracted from the file name.
2) In JavaScript, add a ready callback.
```javascript
//set a callback so that you can do something with the templates once they are loaded.
tmplLoader.ready(function() {
//now we're ready to start rendering with the template.
//just call tmplLoader.render() and pass the template name and a model to bind with.
var content = tmplLoader.render('mytemplate', { message: "whatever" });
//let's have it pop up on the screen.
alert('rendered content: '+content);
});
```
Fancy Stuff
-----------
You can register a built-in template engine with a custom alias I.E. rel="template/custom-alias":
```javascript
//jsrender by default uses "jsrender" and is configured automatically.
tmplLoader.engines.jsrender('custom-alias');
```
You can also register a completely custom template engine:
```javascript
//register a custom engine:
tmplLoader.engines.register('engine-name', {
//code to register the template with some sort of collection.
register: function(name, data) {
...
}),
//code to render the template given some set of data input.
render: function(name, data) {
...
}),
//code to reset the template collection for the engine.
reset: function() {
...
}
});
```
If you want to have multiple templates in a single large file (production scenarios possibly), you can do the following:
1) Create your template file with comments indicating the sections:
```html
template section 1
...
template section 2
...
```
2) Add your template with *"-multipart"* at the end of the REL attribute:
```html
```
3) Reference the templates as "file name"_"part name":
```javascript
tmplLoader.render('mytemplate_multi_section1', { data: "foo" });
```
Future Releases
---------------
Add more templating engines.
Add unit testing to repo.