Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

133 lines (80 sloc) 4.124 kB

Plates Build Status

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.

Motivation

  • 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.
  • Allow designers to write markup and test styling without impacting logic or special placeholders.

Usage

On the Server

Install the library using npm or add it to your package.json file as a dependancy.

  npm install plates

Take some markup, some data, bind them, done.

  var Plates = require('plates');

  var html = '<div id="test">Old Value</div>';
  var data = { "test": "New Value" };

  var output = Plates.bind(html, data); 

  //
  // with the output, you could serve it up or process it further with JSDOM
  //

  ...
  response.end(output);
  ...

On the client

Include the script somehow wherever you are going to use it.

  <script type="text/javascript" src="plates.js"></script>

Here's a contrived example using jQuery.

<html>
  <head>
    <script type="text/javascript">

      var html = $('#template1')[0];
      var data = { "template1": "New Value" };

      var output = Plates.bind(html, data);

      $('#template1').html(output);
      $('#ui')

    </script>
    <style>
      .templates { display: none; }
    </style>
  <body>

    <div class="templates">
      <div id="template1">Old Value</div>
    </div>

    <div class="ui">
    </div>
  </body>
</html>

Defining explicit instructions for matching data keys with html tags.

Plates will attempt to match the data key to the id of the element. If you want to be specific about the relationship between

An example of matching a data key to a class

  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();

  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.

  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();

  map.where('class').is('test').use('foo').as('src');

  console.log(Plates.bind(html, data, map));

The options object contains a mapping of option-key to data-key. In the above example, the option-key has an array value. The array can contain two values, the attribute name (1) and optionally the attribute name (2) to populate with the new value.

License

(The MIT License)

Copyright (c) 2011 Nodejitsu Inc. http://www.twitter.com/nodejitsu

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. FUCK YEAH.

Jump to Line
Something went wrong with that request. Please try again.