Using data bind for Clean Plating

In plates you have several methods that can be used for templating. You can use the id (note though that id's have to be unique in the DOM), you can use class names, and you can use your own tags. If you use your own tags you will want to use data-* as it is part of HTML5, and this page explains how you can do it in plates.

Syntax

First of all, you are free to use whatever syntax you like, plates does not discriminate. That said there are some practical advantages to use the following syntax.

• Use data-bind="Name of field in data source" to bind to the content of the tag.
• Use data-bind-[attr]="Name of field in data source" where [attr] is something like src, href, value to bind to a specific attribute in the html.

Benefits

• Easy search. You can search your entire project for data-bind and data-bind-* to find all data bound elements. That is tremendously valuable in larger projects.
• You communicate intent well. Every developer grasps what data-bind means. Using a class name does not indicate that binding takes place.
• You can tell your designers to ignore data-bind. They will mess with classes (they just can't help themselves) but you can educate them that data-binds are not to be fooled around with.
• data-bind can be easily used for two-way binding, the process of binding html content to a data object.

Drawbacks

• A tad bit more typing.