Oz Bundle

The Oz templating library with the most common tags already included.

Installation

Using component:

$ component install treygriffith/oz-bundle

As a standalone (using the scripts in dist/):

<script src="oz-bundle.min.js"></script>

Which is made available via UMD on the global scope as Oz.

Usage

var template = Oz('<div oz-scope="person">' +
  '<input type="text" oz-val="name">' +
  '<button oz-evt="click:save">Save</button>' +
  '</div>');

document.body.appendChild(template.render({ person: { name: 'Brian' } });

// outputs:
// <div oz-scope="person">
//  <input type="text" oz-val="name" value="Brian">
//  <button oz-evt="click:save">Save</button>
// </div>

template.update({ person: { name: 'Tobi' } });

// changes DOM to:
// <div oz-scope="person">
//  <input type="text" oz-val="name" value="Tobi">
//  <button oz-evt="click:save">Save</button>
// </div>

template.on('save', function () {
  console.log("Save was clicked!"); // logs when <button> is clicked.
});

template.on('change:person.name', function (val) {
  console.log("Name was changed to "+val); // logs when the user changes the <input>
});

See Oz for general usage information, and the individual tag components for tag specific information. The tags included in this bundle are:

• oz-attr Bind an attribute value to a property
• oz-each Render each element for each member of an Array
• oz-evt Propagate events from the DOM to the template
• oz-if Boolean show/hide
• oz-scope Scope child nodes to a property
• oz-text Render a text node
• oz-val Add a form value, and get notified when they change

License

MIT