Live Template
It's great if one can genetate HTML quickly as normal data types.
Now with LiveScript, I find the pretty way to generate HTML.
Usage
Install the module from NPM by:
npm install -g live-templ
And require the module in your code with:
{tmpl} = require("../lib/tmpl")
Demo
The online verison is placed at: http://jiyinyiyong.github.com/live-tmpl/page/
Read my code in src/
or page
for details, here's also one:
dowload-link = "http://jiyinyiyong.github.com/live-tmpl/page/tmpl.js"page-link = "http://jiyinyiyong.github.com/live-tmpl/page/"repo-link = "https://github.com/jiyinyiyong/live-tmpl/" hope-words = ''' JSON is a build-in type in JavaScript. Hope everyone enjoys it. More often, we need to deal with HTML in browsers. For Example, the client templating in single-page apps. So, why is it ugly and awful to generate HTML with JS? Now I'm writting live-tmpl, trying to make it easy in LiveScript. ''' hope-html = hope-words.split "\n" .map -> p: it.trim! demo = "/root.main name='top'": * "h3": "Home page of Live-tmpl" * ".list" * ".line": * "span.title": "Goal" * ".list": hope-html * ".line": * span: "by" * span: "Jiyin Yiyong" * ".line": * span: "in" * span: "LiveScript" * ".links": * p: "Some links here:" * ".line": * "a href='#dowload-link'": "Download" * "a href='#page-link'": "Demo Page" * "a href='#repo-link'": "Github Repo"
Compiles to(after beautify):
Home page of Live-tmpl Goal JSON is a build-in type in JavaScript. Hope everyone enjoys it. More often, we need to deal with HTML in browsers. For Example, the client templating in single-page apps. So, why is it ugly and awful to generate HTML with JS? Now I'm writting live-tmpl, trying to make it easy in LiveScript. by Jiyin Yiyong in LiveScript Some links here: Download Demo Page Github Repo
I didn't beautify that in code, so the result returns in a line.
Syntax
You may have noticed that, .clas
means class
, /id
means id
,
In LiveScript, #key
means interpolation in strings, just use it.
For some reason, attributes just follows after a white space.
If you write LiveScript, you may like it.
Future
If there's a better way found, I'd like to change the design.
I hate brackets, but this version indents too much...