JML

Data-driven content generation library

Getting started

Install via NPM...

$ npm install jml

... or add script to your web page.

<script type="text/javascript" src="/path/to/jml.js"></script>

... or install script via bower and add via requirejs.

bower install git://github.com/tenphi/jml.git

require(['./components/jml/jml'], function(jml) {
  jml.render(/* view *//*, state */);
});

Simple usage

jml.render([
  ['div', 
    { class: 'container' },
    ['a', {
      class: 'link', 
      href: 'http://tenphi.me'
    }, 'Link text'],
    ['img', {
      src: '/myphoto.jpg', 
      alt: '', 
      style: {
        width: '100px'
      }
    }]
  ]
]);

output:

<div class="container"><a class="link" href="http://tenphi.me">Link text</a><img src="/myphoto.jpg" alt="" style="width: 100px; " /></div>

Render with state

Create template:

var link = jml.view([
  ['a', {
    href: 'http://tenphi.me',
    target: function() {
      return this.target;
    }
  }, function() {
    return this.body;
  }]
]);

and render it with state:

link({
  body: 'text',
  target: '_blank'
});

output:

<a href="http://tenphi.me" target="_blank">text</a>