Currently beard has its own template engine NOTE that beard is not yet in beta. The API of it, especially the advanced part has not been finalised yet.

Examples & Documentation

I am quite a fan of javascript template engines. In some real projects, I used jQuery template, Mustache, jQote2. I like them as they really helped. However, as I kept trying different templates engines, none of them can finally meets my own requirements.

I want something that can manage the templates more efficient. Months ago, I came up with an idea, but I only implemented the first part of the idea and did not have time to push it to the second phase which is the real interesting stuff. However, I did have another idea I think is funny and not too hard to implement, so I spent around two weeks in order to share it to the community.

At first, Beard.js is developed for managing templates from any other template engine. It is kinda template management. It did well, but I found that it could not reflect my whole idea yet. I therefore went on developing Beard's own template engine, and it finally comes to two components : beard-core.js and beard-advanced.js.

In Beard, you can create and use a template quite easily.

Beard use html comments to store your templates. Here is a hello world example http://jspopisno1.github.com/Beard/#exmp_helloworld

// --- in html, template's body is enclosed with <!--@  @-->
<div beard='FirstTpl'>
	<!--@ Hello world, my name is [`` d.name `]. @-->
</div>

// --- in js
$(function(){
	Beard.load();

	// return - Hello world, my name is Beard.
	alert( Btpls.FirstTpl({name: 'Beard'}) );
});

Using Beard, you can manage the templates in a tree-like struture. Imagine in a case, there are two sections in a page. Each section consists of header, content and footer, and you would like to divide the big chuck into small templates.

Instead of defining

UserSection
UserHeader
UserContent
UserFooter

BookSection
BookHeader
BookContent
BookFooter

You can nest them like

UserSection
	Header
	Content
	Footer

BookSection
	Header
	Content
	Footer

Defining them is easy, because Beard.js can help you nest your templates with the help of nested divs: http://jspopisno1.github.com/Beard/#exmp_start_demo_comps-simple

<div beard='UserSection'>
	<!--@
	[`` t.Header(d) + t.Content(d) + t.Footer(d)
		// to call a sub template, use t.SomeSubTpl()
		// oh BTW, [`` `] is something like <%= %>, you can totally define your own syntax
	`]
	@-->
	<div beard='Header'> ... </div>
	<div beard='Content'> ... </div>
	<div beard='Footer'> ... </div>
</div>

Beard also allows template references. For instance, you want to create helpers for some frequently-used templates, say, some input templates. You can make use of the idea of template reference. Here is the code http://jspopisno1.github.com/Beard/#exmp_syntax-reference

<div beard='UserSection'>
	<!--@
	[`` t.Inputs.Button('some text')
		// using bref, you can create a template reference
	`]
	@-->
	<div beard='Header'>
		<!--@
		[`` t.p().Inputs.Text('First Name : ', 'firstname', '')
			// You can also call it here. p() is something like go up a level
		`]
		@-->
	</div>
	<div beard='Inputs' bref='Inputs' />
</div>

<div beard='Inputs'>
	<div beard='Button' bargs='text, href'>
		<!--@ <a class='fancybutton' href='[`` href?href:"javascript:void(0)" `]' >[`/ text `]</a> @-->
	</div>
	<div beard='Text' bargs='label, name, value'>
		<!--@ <label>[`/ label `]</label><input type='text' value='[`/ value `] name='[`/name`]'/> @-->
	</div>
</div>

Beard can help you call some frequently used functions easily by just its name without any namespace. For instance, you can use Beard.extendsUtils to define some util function, say, Beard.extendUtils({ myFunc: function(){ ... } }). You can then call it like :

<div beard='Test'>
	<!--@
	[`` myFunc() `]
	@-->
</div>

Don't worry, Beard does not use WITH statement to achieve this feature, so the performance won't be affected. http://jspopisno1.github.com/Beard/#exmp_outside-utils

1. You can define your own syntax. For example, <% %> to replace the current [## #], <%= %> to replace [`` `]. http://jspopisno1.github.com/Beard/#exmp_syntax-configure
2. Bind data to html elements. http://jspopisno1.github.com/Beard/#exmp_start-demo-datamode
3. Define your own argument for a template. http://jspopisno1.github.com/Beard/#exmp_syntax-arguments
4. Load template from plain text or javascript object.
5. Load template from server using ajax call.
6. Debug mode, provide detailed information. e.g., compiled function, template calling log. http://jspopisno1.github.com/Beard/#exmp_start-demo-debugmode
7. Bind data and dom into BeardNode object, and BeardSlot can be used to contain and manage nodes. (Advanced Usage, not yet finalised). http://jspopisno1.github.com/Beard/#exmp_outside-slot

Simply download beard-core.js, and include it and jQuery ( >1.4.4 ) in your page.

<script type="text/javascript" src="../jquery-1.6.min.js"></script>
<script type="text/javascript" src="../beard-core.js"></script>

Set up the templates and call Beard.load(). You are ready to go!

<script>
    $(function(){
        Beard.load();
        alert(Btpls.HelloWorld({name: 'Beard'}))
    })
</script>

See helloworld.html in examples.

If you want to know the performance of rendering pure html text, you can check out jsPerf 257

Or if you want to know the performance of rendering pure html text plus rendering the html to the page using innerHTML, get jsPerf 259

Using the example 'Todos', rendering 2000 records.

jsView If you cannot open it, you can try jsView (500 records)

Beard rendering into Beard Nodes

Beard rendering as plain html