Synopsis

Motivation

Status

Features

Installation

Usage

Simple case

varPlates=require('plates');varhtml='<div>Old Value</div>';vardata={"test":"New Value"};varoutput=Plates.bind(html,data);

Explicit instructions

varhtml='<span>User</span>...<span>User</span>';vardata={"username":"John Smith"};varmap=Plates.Map();map.class('name').to('username');console.log(Plates.bind(html,data,map));

Complex instructions

varhtml='<a href="/"></a>';vardata={"newurl":"http://www.nodejitsu.com"};varmap=Plates.Map();map.where('href').is('/').insert('newurl');console.log(Plates.bind(html,data,map));

varhtml='<a href="/foo/bar"></a>';vardata={"newurl":"bazz"};varmap=Plates.Map();map.where('href').has(/bar/).insert('newurl');// `has` can take a regular expression.console.log(Plates.bind(html,data,map));

varhtml='<img data-foo="bar" src=""></img>';vardata={"imageurl":"http://www.nodejitsu.com"};varmap=Plates.Map();map.where('data-foo').is('bar').use('imageurl').as('src');console.log(Plates.bind(html,data,map));

Collections

varhtml='<div></div>';varcollection=[{'name':'Louis CK'},{'name':'Andy Kindler'},{'name':'Greg Giraldo'}];console.log(Plates.bind(html,collection));

Partials

varpartial='<li></li>';varbase='<div><h1></h1><ul></ul></div>';varbaseData={foo:'bar'};varmapping=Plates.Map();mapping.class('menu').append(partial);console.log(Plates.bind(base,baseData,mapping));

API

Plates Static Methods

function Plates.bind(html, data, map)@param html {String} A string of well-formed HTML.@param data {Object} A JSON object.@param map {Object} An instance of `Plates.Map()`.@return {String} The result of merging the data and html.

Map Constructor

function Plates.Map(options)@options {Object} An object literal that contains configuration options.  - @option where {String} The default attribute to match on instead of ID.  - @option as {String} The default attribute to replace into.@return {Object} An object that represents a reusable map, has mapping methods.

Map Instance Methods

where()

function Map#where(attribute)@param attribute {String} An attribute that may be found in a tag.This method will initiate a clause. Once a clause has been established,other member methods may be chained to each other in any order.

class(), className()

function Map#class(attribute)@param attribute {String} A value that may be found in the `class` attribute of a tag.

is()

function Map#is(value)@param value {String} The value of the attribute specified in the `where` clause.

has()

function Map#has(value)@param value {String|RegExp} The value of the attribute specified in the `where` clause.

insert()

function Map#insert(attribute)@param attribute {String} A string that represents a key. Data will be inserted intothe attribute that was specified in the `where` clause.

use()

function Map#use(key)@param key {String|Function} A string that represents a key in the data object that was provided or a function which returns a string value to use.If a function is provided, it will be passed data, value and tagbody parameters.

to()

function Map#to(key)@param key {String|Function} A string that represents a key in the data object that was provided or a function which returns a string value to use.If a function is provided, it will be passed data, value and tagbody parameters.Same as `use` method.

as()

function Map#as(attribute)@param attribute {String} A string that represents an attribute in the tag.If there is no attribute by that name found, one may be created depending on the optionsthat were passed to the `Map` constructor.

remove()

function Map#remove()Removes the matching elements from the template.

append(), partial()

function Map#append(html, data, map)@param html {String} A string that represents the new template that needs to beadded.@param data {Mixed} data for the partial, if it's a string it's a reference to akey in the data structure that was supplied to the main template.@param map {Plates.Map} data mapping for the partial.If the supplied HTML string doesn't contain any HTML markup we assume that wethe given string is the location of the template. When you are using Plates onthe browser is assumes that you supplied it with an id selector and will fetchthe innerHTML from the element. If you are using Plates in Node.js it assumesthat you gave it a file path that is relative to the current working directory.

License