<<<<<<< HEAD

Pre-release v0.1.17

=======

Bars

Bars is a lightweight high performance HTML aware templating engine. Bars emits DOM rather than DOM-strings, this means the DOM state is preserved even if data updates happen.

Library	Size	Runtime Size	Emits
mustache.min.js	10 KB	10 KB	DOM-strings
bars.min.js	53 KB	15 KB	DOM
handlebars.min.js	73 KB	14 KB	DOM-strings
react.min.js	149 KB	N/A	DOM
react-with-addons.min.js	160 KB	N/A	DOM
ember.min.js	419 KB	173 KB	DOM

• Try Bars.
• Benchmark.

Install:

$ npm install bars

What Bars Looks Like

Bars:

<ul>
{{#each persons}}
   <li>{{@number(@index) + 1}} - {{name}}</li>
{{/each}}
</ul>

{{#if x < 5}}
   <span>x is less then 5</span>
{{else if x > 5}}
    <span>x is greater then 5</span>
{{else}}
   <span>x is equal to 5</span>
{{/if}}

{{@upperCase(title)}}

Object:

{
   persons: [
      { name: 'John' },
      { name: 'Jane' },
      { name: 'Jim' },
   ],
   x: 2,
   title: 'The Cat in the Hat'
}

Output:

text representation

<ul>
   <li>1 - John</li>
   <li>2 - Jane</li>
   <li>3 - Jim</li>
</ul>


   x is less then 5


THE CAT IN THE HAT

For all features see Bars Spec.

Mike96Angelo/master

Table of Contents

• Bars
  • Bars.compile(template)
  • Bars.preCompile(template)
  • Bars.build(compiledTemplate)
  • Bars.registerBlock(name, func)
  • Bars.registerPartial(name, template)
  • Bars.registerTransform(name, func)
  • Class: Fragment
    • Fragment.render()
  • Class: DomFrag
    • DomFrag.update(data)
    • DomFrag.appendTo(element)

Bars.compile(template)

not available in the runtime only package.

Also see bars-browserify.

• template String A Bars template string.
• return: Fragment A new Fragment created from the template.

Returns a new Fragment.

Example:

var bars = new Bars();

var frag = bars.compile('<h1>Hello, {{name}}.</h1>');

//Note: bars.compile(template) is equivalent to bars.build(bars.preCompile(template))

Bars.preCompile(template)

not available in the runtime only package.

Also see bars-browserify.

• template String A Bars template string.
• return: Object A object structure representing the template.

Returns a object structure representing the template.

Example:

var bars = new Bars();

var myCompiledTemplate = bars.preCompile('<h1>Hello, {{name}}.</h1>');

Bars.build(compiledTemplate)

• compiledTemplate Object A Bars compiled template.
• return: Fragment A new Fragment created from the template.

Returns a new Fragment.

Example:

var bars = new Bars();

var frag = bars.build(myComiledTemplate);

Bars.registerBlock(name, func)

• name String The name of the partial.
• func Function The partial template.
• return: Bars This Bars.

Returns this Bars.

Example:

bars.registerBlock('unless', function unlessBlock(con) {
    return !con;
});

/**
 * To use the `unless` block in a template
 * use this {{#unless <arg>}} {{else}} {{/unless}}.
 */

Bars.registerPartial(name, template)

• name String The name of the partial.
• template String The partial template.
• return: Bars This Bars.

Returns this Bars.

Example:

bars.registerPartial('person', '<h2>{{name}}</h2>{{#if age}} - {{age}}{{/if}}');

/**
 * To use the `person` partial in another
 * template use this {{>person <arg>}}.
 */

Bars.registerTransform(name, func)

• name String The name of the partial.
• func Function The partial template.
• return: Bars This Bars.

Returns this Bars.

Example:

bars.registerPartial('upperCase', function upperCase(a) {
    return String(a).toUpperCase();
});

/**
 * To use the `upperCase` transform in a
 * template use this {{@upperCase(<arg>)}}.
 */

Class: Fragment

A Fragment that is compiled using the Bars.compile(template) method.

Fragment.render()

• template Object Object context for rendering.
• return: DomFrag A new DomFrag.

Creates a new DomFrag from the compiled template and data.

Example:

var dom = frag.render().update({name: 'John'});

Class: DomFrag

A DomFrag.

DomFrag.update(data)

• data Object Object context for rendering update.
• return: DomFrag This DomFrag.

Updates and renders This DomFrag.

Example:

dom.update({name: 'Bob'});

DomFrag.appendTo(element)

• element: Element The DOM Element to append This DomFrag to.
• return: DomFrag This DomFrag.

Returns this DomFrag.

Example:

dom.appendTo(document.body);

Author:

Michaelangelo Jong
Dallas Read

License:

The MIT License (MIT)

Copyright (c) 2015-2016 Michaelangelo Jong

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.