HTML

HTML is The BEST JavaScript templating language EVER

  • Owner: Marak/HTML
  • Platform:
  • License::
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

HTML is The BEST JavaScript templating language EVER

HTML was heavily inspired by Jade from Visionmedia

Features

  • HTML is valid (X) HTML 4.01 and HTML5!
  • HTML is Insanely Fast !
  • Safari, Internet Explorer, Chrome, and Firefox are all specifically optimized for rendering HTML!
  • HTML is highly portable ( Even tested it in Microsoft Frontpage and Macromedia Dreamweaver )
  • HTML is < 4 bytes in size!
  • It's not possible to write logic in HTML
  • I'm pretty annoyed I had to build this.

Note: I have no fucking clue how to successfully use Weld or Plates.

Core Concepts

  • You already know HTML
  • JSON data automatically maps to CSS classes
  • You cannot define any custom logic or maps with HTML
  • That's it.

Examples

Rendering basic data

var html = require('html-lang');
console.log(html.render({ name: "Bob" }, tmpl));
<p class="name">name placeholder</p>

outputs:

<p class="name">Bob</p>

Rendering an Object

var html = require('html-lang');

var user = { user: { name: "Bob", email: "bob@bob.com" }};

console.log(html.render(user, tmpl));
<div class="user">
  <p class="name">name placeholder</p>
  <p class="email">email placeholder</p>
</div>

outputs:

<div class="user">
  <p class="name">Bob</p>
  <p class="email">bob@bob.com</p>
</div>

Rendering an Array of Objects ( collection )

var html = require('html-lang');

var users = [ 
  { name: "Bob", email: "bob@bob.com"}, 
  { name: "Marak", email: "marak@marak.com"}
];

console.log(html.render(users, tmpl));
<div class="users">
  <div class="user">
    <p class="name">name placeholder</p>
    <p class="email">email placeholder</p>
  </div>
</div>

outputs:

<div class="users">
  <div class="user">
    <p>Bob</p>
    <p>bob@bob.com</p>
  </div>
  <div class="user">
    <p>Marak</p>
    <p>marak@marak.com</p>
  </div>
</div>

XML Node Attributes

<p class="name"><a href="" class="link"></a></p>
var html = require('html-lang');

var data = { 
  'link': "The big website", 
  'link.href': "http://big.vc" 
};

console.log(html.render(data, tmpl));

outputs:

<p class="name"><a href="http://big.vc" class="link">The big website</a></p>

That's it. I challenge you to find a use-case that isn't covered by HTML.

Overview

Name With OwnerMarak/HTML
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:
Release Count2
Last Release Namev0.2.0 (Posted on )
First Release Namev0.1.0 (Posted on )
Created At2012-08-19 11:04:01
Pushed At2013-06-03 23:34:52
Last Commit At2013-06-03 16:34:52
Stargazers Count99
Watchers Count16
Fork Count64
Commits Count70
Has Issues Enabled
Issues Count8
Issue Open Count1
Pull Requests Count3
Pull Requests Open Count0
Pull Requests Close Count1
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top