Plates (fork?) with some DSL

[Vinze]

I really don't know if this is the right place for my question, but I can't think of a better place.

The past couple of days I've been doing some research and testing with different Javascript templating engines. So far Plates looks like the best choice for me, it's really great! However, there is one thing I would like to see different. For example:

// Some dummy data
var messages = [
    {"username": "John", "message": "Lorem ipsum #1"},
    {"username": "Kate", "message": "Lorem ipsum #2"}
];

// Plates:
var template = '<p><span class="username"></span>: <span class="message"></span></p>';

// Plates with some DSL
var template = '<p>{{username}}: {{message}}</p>';

// Create the output
var output = Plates.bind(template, messages);
$('#messages').append(output);

As you can see, I'd like to use some domain specific language with Plates, because it makes the code just a bit more compact and I don't have to add additional tags. I understand this is against the motivation of Plates, so please don't think I'd like to see this implemented in the main project. I tried fork the project and update the code to work with {{Mustache}} tags, but I don't have a clue where to start.

If it's not to much work or time consuming, could someone of the dev team create a alternative version of Plates? Or at least give me some advice how I could implement it myself?

Oh and one more thing: I've also looked into other templating engines which use DSL out of the box, but I really don't like the way they handle looping over collections.

[Draggha]

Wouldn't it be better if you could use those <span> as a placeholder? Or a new custom tag? Something like this perhaps:

// Some dummy data
var data = [
    {"username": "John", "message": "Lorem ipsum #1"},
    {"username": "Kate", "message": "Lorem ipsum #2"}
];

// Plates:
var template = '<p><span class="username"></span>: <span class="message"></span></p>';

// OR Plates with custom tag
var template = '<p><placeholder>username</placeholder>: <placeholder>message</placeholder></p>';

// Create the output
var map = Plates.Map();
// Create a new method to replace the tag entirely with your data.
map.replace('username').with('username');
map.replace('message').with('message');
var output = Plates.bind(template, data, map);
$('#messages').append(output);
/*
OUTPUT:
<p>John: Lorem ipsum #1</p> 
<p>Kate: Lorem ipsum #2</p> 
*/

The custom tag is to long, but with methods like that the possibilities would be endless. The method just needs to be thought out carefully. replace is a good expressive name for this task, but it doesn't tell you if you're targeting a class, an id or an attribute. Maybe if there were three of those methods? replaceClass(), replaceId() and replaceAttribute() perhaps? jQuery-like selectors were a possible solution, but that would add more overhead through string operations instead of different method calls.

Would this solve your problem @Vinze? Or are there other reasons, besides those you mentioned, why you would need DSL?