Data-driven content generation library
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
component.json
jml.js
package.json
test.js

README.md

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>