Permalink
Browse files

[lib] readme

  • Loading branch information...
1 parent a44d75c commit c4825a060bb5b6c3f6a5bbf5caff76467b00cfa9 Paolo Fragomeni committed Dec 24, 2011
Showing with 13 additions and 12 deletions.
  1. +13 −12 README.md
View
@@ -6,7 +6,6 @@ Plates (short for templates) binds data to markup. There's NO special syntax. It
## Motivation
-- 2x faster than Mustache.
- No NON-HTML in your HTML such as <%=foo%> or {{foo}}.
- Promote portable code/markup by decoupling decision making from presentation.
- Make both the code and markup more readable and maintainable.
@@ -92,27 +91,29 @@ Plates will attempt to match the data key to the `id` of the element. If you wan
```js
- var html = '<div id="test" class="sample example">Old Value</div>';
- var data = { "sample": "New Value" };
+ var html = '111<div id="outer">222<div id="inner">333</div><img class="test" src=""/>444</div>555';
- //
- // A property map establishes the preferred mapping of data-key to tag property.
- //
- var options = { "sample": "class" };
- var output = Plates.bind(html, data, options);
+ var data = { "foo": "New Value" };
+ var map = Plates.Map();
+
+ map.where('class').is('test').use('foo');
+
+ console.log(Plates.bind(html, data, map));
```
#### An example of putting the new value into the attribute rather than the tag body.
```js
- var html = '<span></span><img id="bar" class="foo bazz" src=""/>';
- var data = { "bazz": "Hello, World" };
+ var html = '111<div id="outer">222<div id="inner">333</div><img class="test" src=""/>444</div>555';
+
+ var data = { "foo": "New Value" };
+ var map = Plates.Map();
- var options = { "bazz": ["class", "src"] };
+ map.where('class').is('test').use('foo').as('src');
- var output = Plates.bind(html, data, options);
+ console.log(Plates.bind(html, data, map));
```

0 comments on commit c4825a0

Please sign in to comment.