AJADE
Asynchronous-Rendering Jade Template Engine.
Usage (RequireJS)
Install:
bower install ajade
Usage example:
define([
'/path/to/ajade/index',
'/path/to/master_template.jade',
], function(
aJade,
tpl
) {
// tpl can be either jade source template or server side compiled
// render function. But in this case you will also need Jade-Runtime
// environment available.
var targetPage = $(".someSelector"); // jQuery
var P = aJade.aRender( // Returns promise.
targetPage
, locationTemplate
, {lid: lid}
);
});
Sample template
div
h1 Ajade Example
p This part will be displayed immediately
script(type="ajade" data-src="/path/to/some/api/function?someParameter="+someVar).
div.fooClass(data-foo="foo attribute")
before
h2="aJade test"
p Loading dynamic contents...
then
h2="aJade test"
ul
each row in data
li=row.description
catch
h2 aJade test Error
p=err
// script (type="ajade" ...)
// script (type="ajade" ...) // Even recursive...
Notes
- You can define as much dynamic blocks as you want.
- Even recursively...
- Each one will receive two locals:
- data: with the results of the request.
- model: Empty object by default. But you can use
data-model
attribute (on the script tag, for a default model.data-models
, for{before: before_model, then: then_model, catch: catch_model}
.
- API url is expected to return JSON data.
- But, if html response received, then-teplate is ignored and received html is inserted instead. At developing time, this is very useful, for example, with html output filters of PASAR APIs.
- From version 0.1.0, "then" subtemplate can be loaded asynchronously by specified its url in data-then attribute.
- From version 0.1.1 aRender() returns a promise which resolves when whole template tree is rendered (not necessary having successed on every subtemplate).
Contributing
If you are interested in contributing with this project, you can do it in many ways:
-
Creating and/or mantainig documentation.
-
Implementing new features or improving code implementation.
-
Reporting bugs and/or fixing it.
-
Sending me any other feedback.
-
Whatever you like...
Please, contact-me, open issues or send pull-requests thought this project GIT repository