Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plates (fork?) with some DSL #111

Open
Vinze opened this issue Jun 22, 2013 · 1 comment
Open

Plates (fork?) with some DSL #111

Vinze opened this issue Jun 22, 2013 · 1 comment

Comments

@Vinze
Copy link

Vinze commented Jun 22, 2013

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
Copy link

Draggha commented Jun 28, 2013

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants