Simple. Weld turns data into markup. There's special syntax required. It works in the browser and in node.js!

• Standards compliant. No foreign concepts such as <%=foo%> or {{foo}}.
• Promote portable code/markup by decoupling decision making from presentation.
• More readable code/markup.
• Increase maintainability by developers with various skill sets.

Get a collection of elements, provide your data, optionally provide configuration details.

weld(element, data, [config]);

Use with whatever library you want, jQuery for example.

$('.selector').weld(data, [config]);

This is the target html which will be used as the template.

Could be any data, an object an array, an array of objects, etc.

An object literal (optional), can include any of the following...

map - A map function is executed against every match of data-key/element. It gives the opportunity to manipulate the element before it is finalized. Returning false from map will cause the traversal of the current branch to stop.

map: function(parent, element, key, val) { 
  return true; // returning false will cancel the traversal down this branch
}

alias - An object literal that will point one or more data-keys at an alternative selector. This is useful when you have data that doesn't explicitly correlate with the name, class or id of an HTML element.

bind: { 
  'myDataValueKey': '.someClassSelector',
  'otherKey': '#someId'
}

overwrite - Should we overwrite the old HTML? (true by default)

overwrite: true

npm install weld

/*
  @function {jQuery object}
    Turn weld into a jQuery plugin.

  @param {object} data
    The data which will be used for the weld.
  @param {object} config
    A configuration object.
*/

if(jquery) {  
  $.fn.weld = function(data, config) {
    weld(this, data, config);
    return this;
  };
}  

Create a DOM, load a library, read a file and bind the data to it...

var fs    = require('fs'),
    jsdom = require('jsdom'),

jsdom.env({
  code: [
    '/../lib/jquery.js',
    'path/to/weld.js'
  ],
  html: '/../files/contexts.html'
},
function(window) {

  window.jQuery = $;

  var data = [{ name: "hij1nx",  title : "code slayer" },
              { name: "tmpvar", title : "code pimp" }];

  $('.contact').weld(data);
});

Here is the corresponding markup that our script above will load...

<ul class="contacts">
  <li class="contact">
    <span class="name">My Name</span>
    <p class="title">Leet Developer</p>
  </li>
</ul>

And here are the results that it will produce...

<ul class="contacts">
  <li class="contact">
    <span class="name">hij1nx</span>
    <p class="title">code slayer</p>
  </li>
  <li class="contact">
    <span class="name">tmpvar</span>
    <p class="title">code pimp</p>
  </li>  
</ul>

By default, weld uses a heuristic that assumes each of the keys in the data's key: value pairs is an '#id', a '.class' or 'name'. This addresses the 80/20 of cases.

There are cases where you need to be more explicit and map a data key to an element or collection of elements. To do this, you can add a mapping of data keys to selectors. So, for the following HTML...

<ul class="contacts">
  <li class="contact">
    <span class="name">Hello my name is <span class="firstAndLast">My Name</span></span>
    <p class="title">Leet Developer</p>
  </li>
</ul>

Using this data... var data = [{ name: 'hij1nx', title: 'code exploder' }, { name: 'tmpvar', title: 'code pimp' }];

Just add the bind parameter. weld('.contact', data, { bind: { 'name': '.firstAndLast', 'title': '.title' } });

This will produce...

<ul class="contacts">
  <li class="contact">
    <span class="name">Hello my name is <span class="firstAndLast">hij1nx</span></span>  
    <p class="title">code slayer</p>
  </li>
  <li class="contact">
    <span class="name">Hello my name is <span class="firstAndLast">tmpvar</span></span>  
    <p class="title">code pimp</p>
  </li>  
</ul>

developed by hij1nx and tmpvar

If you want to learn more about JSDOM, go here it's an awesome project.

0.1.0