Permalink
Browse files

[merge] rewrite -> master

  • Loading branch information...
2 parents 2482486 + 0daf11c commit 1b4fdd571bae8b0dfbca4c806bfd30085ebf5d21 Paolo Fragomeni committed Jan 12, 2012
View
@@ -2,11 +2,10 @@
## Synopsys
-Plates (short for templates) binds data to markup. There's NO special syntax. It works in the browser and in node.js! The right way to do this is with a DOM. Unfortunately, at the moment, the DOM is slow. On the server, it is quite slow. So Plates implements a very loose HTML parser.
+Plates (short for templates) binds data to markup. There's NO special syntax. It works in the browser and in `Node.js`. The right way to do this is with a DOM. Unfortunately, at the moment, the DOM is slow. On the server, it is quite slow.
## 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.
@@ -19,7 +18,7 @@ Plates (short for templates) binds data to markup. There's NO special syntax. It
Install the library using npm or add it to your `package.json` file as a dependancy.
```bash
- $npm install plates
+ npm install plates
```
Take some markup, some data, bind them, done.
@@ -51,28 +50,37 @@ Include the script somehow wherever you are going to use it.
<script type="text/javascript" src="plates.js"></script>
```
-Take some markup, some data, bind them, done.
+Here's a contrived example using jQuery.
```html
- <script type="text/javascript">
+<html>
+ <head>
+ <script type="text/javascript">
+
+ var html = $('#template1')[0];
+ var data = { "template1": "New Value" };
+
+ var output = Plates.bind(html, data);
- var html = '<div id="test">Old Value</div>';
- var data = { "test": "New Value" };
+ $('#template1').html(output);
+ $('#ui')
- var output = Plates.bind(html, data);
+ </script>
+ <style>
+ .templates { display: none; }
+ </style>
+ <body>
- //
- // with the output, append it to the current document or use it however you want.
- //
- ...
- document.body.appendAdjacentHTML(output); // append this to the DOM using native DOM APIs.
- ...
- $('body').appendChild(output);
- ...
+ <div class="templates">
+ <div id="template1">Old Value</div>
+ </div>
+
+ <div class="ui">
+ </div>
+ </body>
+</html>
- </script>
-
```
### Defining explicit instructions for matching data keys with html tags.
@@ -83,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));
```
Oops, something went wrong.

0 comments on commit 1b4fdd5

Please sign in to comment.