leonidas / transparency

Transparency is a semantic template engine for the browser. It maps JSON objects to DOM elements by id, class and data-bind attributes.
http://leonidas.github.com/transparency/
MIT License
969 stars 112 forks source link

FORMS #72

Closed rochacbruno closed 12 years ago

rochacbruno commented 12 years ago

Hi, Sorry if this is not the right place to ask.

But, how can I render forms? is there a pattern for that? I mean

form = {
  name: {control:  "input" , "attrs": { type : "text", name: "username"}},
  email: {control:  "input" , "attrs": { type : "password", name: "email"}}
}

Is there a way to render something like this in to a form?

Thanks

hutorny commented 12 years ago

IMHO all benefits of any template engine - is its ability to separate concerns e.g. data and presentation in this case. Your example I would implement as the following

<form>
    <input id="name" type="text">
    <input id="email" type="password">    
</form>    
<script type="text/javascript">
var data = {
        "name" : "username",
        "email" : "email"
};
    Transparency.render(document.querySelector("form"), data);

If you need to render some specific attributes of input, as I understood Transparency's concept, you need to provide directives - the third parameter of render

pyykkis commented 12 years ago

Thanks @hutorny for answering the question. More examples for forms can be found from the unit tests: https://github.com/leonidas/transparency/blob/master/spec/forms.spec.coffee

For quicker responses, I'd propose using IRC or the mailing list: https://github.com/leonidas/transparency#community