search

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

Provide more examples #105

Closed Merg1255 closed 11 years ago

Merg1255 commented 11 years ago

A few more examples for each case would be nice. :)

pyykkis commented 11 years ago

Readme covers quite a bit of examples. Additionally, there's a web site where you can fiddle around: http://leonidas.github.com/transparency/

Is there something specific you're looking after? I've interactive tutorial in my mind (someday).

Merg1255 commented 11 years ago

For example, what happens when there's a class AND a data-bind, with different values each. Which ones does execute? Examples like that, where it's not that clear what happens with the plugin.

An interactive tutorial would be great! :)

pyykkis commented 11 years ago

Thanks, that's something I could add to the readme. Here's the answer:

Model keys are matched to the template by id, class, name and data-bind attributes, in that order (see https://github.com/leonidas/transparency/blob/master/src/transparency.coffee#L55-L67).

So, if any of those matches to the given key in the model, the value is rendered to the element. In case you have model with keys {foo: "foo", bar: "bar"} and template 

<div>
  <div class="foo" data-bind="bar"></div>
</div>`

you'll have a following result:

<div>
  <div class="foo" data-bind="bar">bar</div>
</div>

In that case, you might be interested in defining a custom matcher and match, e.g., only for data-bind attribute. Please see the section Configuration in the Readme for the details.

Merg1255 commented 11 years ago

Thanks!