Blueplate.

A client-side templating toolkit, written in Javascript.
News   Project   Source   Documentation   Downloads

About

Blueplate is a client-side templating library, and as such is written in Javascript. Syntax is insipired by Google's own Ctemplate, although Blueplate's features are an adaptation of that syntax and not a port. Inspiration comes from many AJAX toolkits that cease being useful once you receive the data from your back end. Many XML-RPC tools, like DWR, hand a Javascript object literal to you, and it's up to you to put it into your interface. The usual result is that developers write Javascript that mashes together data and HTML, then brute-forces it into the DOM. Blueplate is meant to solve that, by allowing HTML to be written freely, apart from Javascript, and dynamically updated at runtime directly from Javascript objects in an MVC fashion.

Here is a simple example of a Blueplate template:

<p id="details">
  Item: {{name}}
  Cost: ${{amount}}
  Tax: ${{tax}}
</p>
        

When your document loads, you tell Blueplate which nodes can be templated:

Blueplate.add("details");
        

And finally, when you receive your data from the back end, you template:

Blueplate.template( "details", {name: "Sandwich", amount: 5.35, tax: 0.26} );
        

The node is templated and placed into the DOM, giving you:

<p id="details">
  Item: Sandwich
  Cost: $5.35
  Tax: $0.26
</p>
        

Please see the documentation (when it's available) for greater detail and more examples.

News

2006/8/8: When Meta-characters Collide

I have been defining my test cases and pondering which functionality from Ctemplate needs to be supported. Here are some key decisions:

1. Ctemplate's {{>...}} syntax has been replaced with {{@...}}. The > symbol does not play well inside HTML markup.

2. Ctemplate's {{#...}} {{/...}} syntax will be preserved. I contemplated doing a completely DOM/node based conditional inclusion system, but this neglects scenarios where intra-node data may need to be conditionally displayed as well. The first Ctemplate sample uses a conditional California sales tax alert message. In a purely nodal system, that node would have to be registered as a template itself to control its visibility. Perhaps I'll think of an elegant solution that allows for the removal of this syntax, but for now, it remains.

As for how a node-based visibility system would work, I haven't finalized that yet either. I think the DOM model lends itself to this. There should be some way to have Blueplate pop templated nodes out of the DOM completely. Basically, like this:

Blueplate.template( "mynode", {..., mynode: false} );

Here, Blueplate would see that the node itself should not be visible, and removes it from the DOM. In this case, the default behavior would be to show a node. This method does not require special templating tags to control visibility of portions of the DOM. I believe that preserving Ctemplate's original syntax in addition to this is a good idea, however, since sub-portions can be controlled easily.

2006/8/7: Progress Continues

Progress continues. Blueplate is still not feature complete, although a lot more code is in place and some features are almost ready for implementation. A meager but promising unit testing page has been created as a scaffolding for future unit tests of the Blueplate templating engine. I will probably add desired features into this page before implementing them and work towards getting the green bar to show up. But who knows! I'm lazy.

2006/8/4: First Commit

The first commit is in. We are still prototyping and testing out how things will work. This is a prototype/proof-of-concept only. The current goals are just to get things rolling, prove the concept, and flush out features, syntax, and API design.