Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
a HTML generator in LiveScript which looks concrete
JavaScript LiveScript CoffeeScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
src
test
dev.coffee
package.json
readme.md

readme.md

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-tmpl

And require the module and use it in your code with:

{tmpl} = require("../lib/tmpl")
console.log (tmpl data)

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!

data =
  "/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):

<div class="main" id="root" name="top">
    <h3>
        Home page of Live-tmpl
    </h3>
    <div class="list">
    </div>
    <div class="line">
        <span class="title">
            Goal
        </span>
        <div class="list">
            <p>
                JSON is a build-in type in JavaScript. Hope everyone enjoys it.
            </p>
            <p>
                More often, we need to deal with HTML in browsers.
            </p>
            <p>
                For Example, the client templating in single-page apps.
            </p>
            <p>
                So, why is it ugly and awful to generate HTML with JS?
            </p>
            <p>
                Now I'm writting live-tmpl, trying to make it easy in LiveScript.
            </p>
        </div>
    </div>
    <div class="line">
        <span>
            by
        </span>
        <span>
            Jiyin Yiyong
        </span>
    </div>
    <div class="line">
        <span>
            in
        </span>
        <span>
            LiveScript
        </span>
    </div>
    <div class="links">
        <p>
            Some links here:
        </p>
        <div class="line">
            <a href="http://jiyinyiyong.github.com/live-tmpl/page/tmpl.js">Download</a>
            <a href="http://jiyinyiyong.github.com/live-tmpl/page/">Demo Page</a>
            <a href="https://github.com/jiyinyiyong/live-tmpl/">Github Repo</a>
        </div>
    </div>
</div>

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...

Something went wrong with that request. Please try again.