A simple way to execute javascript functions and transform+display json data within HTML.
<h1 data-tlc="command --parameter; othercommand --with=$variable">Hello!</h1>
//Include the tlc.js file from this repo in your html file
var tlc = new TLC();
tlc.run($('#someElement'), {'message':'Hello World'});
in your html:
<div id="someElement"> <h1 data-tlc="bind $var '.message'; apply --append;"></h1> </div>
Outputs
<div id="someElement"> <h1 data-tlc="bind $var '.message'; apply --append;">Hello World</h1> </div>An example of usage with Express
var express = require('express');
var app = express();
var http = require('http');
var fs = require('fs');
var TLC = require('tlc');
var tlc = new TLC();
var cheerio = require('cheerio); // jQuery-alike library for DOM parsing
app.get('/', function(req,res,next){
var $document = fs.readFileSync('index.html', 'utf-8);
tlc.run($document, { "message" : "Hello World" });
res.send($document.html());
});
http.createServer(app).listen(3000);
the contents of index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <!-- note here '.message' is the JSONPath string to a member of the JSON object being translated --> <h1 data-tlc="bind $msg '.message'; apply --append=$msg;"></h1> </body> </html>
When running the app, localhost:3000 will serve
The above example introduces 2 of the core commands in tlc, bind and apply. Commands are functions, executed with arguments, within a context. Each tag creates a new context, and before any commands are executed, it consists solely of the JSON data object being translated.
bind is one of the most important commands in tlc- it creates+links a variable within the tlc's context to a component of a JSON data object. For example: bind $msg '.message'; from above create's the variable $msg, and writes "Hello World" to it from the JSON object. This command takes 2 arguments- first, a variable reference to bind into, and second, a JSONPath formatted string to reference the binding.
Our second command, apply --append=$msg;, de-reference's our variable $msg. The apply command is used for applying changes to the tag we are executing commands on, in this case, appending to it.
Note that we can shorten our tlc statement to bind $msg '.message'; apply --append; and it will still apply the contents of the msg variable. This is because by binding it, msg has become the focus variable. All core commands will use the focus variable if none is provided. This is both for syntactic convenience, and also to allow simple chaining on the focus variable, for example, if we were rendering a VERY simple product page:
var productData = {
"name" : "pie"
"price" : "3.14"
}
<div class="price" data-tlc="
bind $cents '.price';
math --mult='100' --mod='100';
bind $dollars '.price';
math --precision='0';
format --prepend='$' --append='.';
focus $cents;
format --prepend='<span class=cents>' --append='</span>';
apply --append=$dollars;
apply --append=$cents;
"</div>
Holy new commands, batman! A few things to note here:
math --mult='100' --mod='100'; - The math command parses its arguments sequentially, meaning that you can daisy chain a bunch of arithmetic together for convenience. Note, a few lines down, format does the same thing.format --prepend='$' --append='.'; - The format command allows you to format the focus variable before you append it to the tag. Note a few lines down- you can use format to add HTML content.focus $cents; - The focus command shifts the current focus variable, just like bind (and set), however it doesn't change the contents of the variable like bind (and set).apply --append=$dollars; apply --append=$cents; - The apply command only takes one 'verb' at a time, currently. This may change in future versions of the core API, but for now, we can't daisy chain like math.The full list of core commands:
bind : bind (and create) a variable to the JSON data objectset : set (and create) a variable to a scalar value;apply : apply a change to the tagformat : format the focus variabletlc : recursively call tlc for the contents of the tag. This is useful for when you have added tlc from within your tlc commands (yo dawg)stringify : set the focus variable to a stringified version of its current value;focus : set the focus to a different variable.math : perform arithmetic on the focus variabledatetime : set the focus variable to the current date. --out='pretty' or --out='mdy' formats are supported.is : used in conditionals (see below).Modules allow developers to extend the command set usable in tlc:
var tlc = require('tlc');
var moduleObject = require('./mymodule.js');
tlc.addModule('mymodule',moduleObject);
This module can be referenced in templates:
<div data-tlc="bind $var '.some.var'; mymodule# --arg=$var; apply --append;"></div>
One module that is not-quite-core but you might find awfully useful is template
For more information, please visit the Module API
<div data-tlc="
bind $new '.user.is_new';
if(is $new --eq='1';){{
bind $user '.user';
template#translate --templateid='newUserWelcomeMessage' --data=$user;
}};
"></div>
<ul data-tlc="
bind $arr '.path.to.array';
foreach $item in $arr {{
template#translate --templateid='listItemTemplate' --data=$item;
apply --append;
}};
"></ul>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3