{"id":13519730,"url":"https://github.com/flatiron/plates","last_synced_at":"2025-05-15T17:00:22.855Z","repository":{"id":57211626,"uuid":"2583320","full_name":"flatiron/plates","owner":"flatiron","description":"Light-weight, logic-less, DSL-free, templates for all javascript environments!","archived":false,"fork":false,"pushed_at":"2019-11-02T15:43:21.000Z","size":201,"stargazers_count":832,"open_issues_count":31,"forks_count":69,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-03-31T21:44:59.756Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flatiron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-10-15T20:07:22.000Z","updated_at":"2025-02-14T15:50:00.000Z","dependencies_parsed_at":"2022-09-06T11:00:46.750Z","dependency_job_id":null,"html_url":"https://github.com/flatiron/plates","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatiron%2Fplates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatiron%2Fplates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatiron%2Fplates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatiron%2Fplates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flatiron","download_url":"https://codeload.github.com/flatiron/plates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737770,"owners_count":20987718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T05:02:02.450Z","updated_at":"2025-04-07T22:06:20.643Z","avatar_url":"https://github.com/flatiron.png","language":"JavaScript","readme":"![plates](https://github.com/flatiron/plates/raw/master/plates.png)\n\n# Synopsis\nPlates (short for templates) binds data to markup. Plates has NO special syntax. It works in the browser and in [Node.js](http://nodejs.org/).\n\n# Motivation\n- DSLs (Domain Specific Languages) such as `\u003c%=foo%\u003e` or `{{foo}}` reduce portability.\n- DOM templating is SLOW.\n- Promote the separation of concerns principle by decoupling decision making from presentation.\n- Make both the code and markup more readable and maintainable by a wider audience.\n\n# Status\n\n[![Build Status](https://secure.travis-ci.org/flatiron/plates.png)](http://travis-ci.org/flatiron/plates)\n\n# Features\n- Automatically bind data to a tag's body by matching unique tag IDs to data keys.\n- Bind data to a tag's body based on any attribute's values.\n- Bind data to a tag's attribute based on any attribute's values.\n\n- TODO: Specify option to create attribute if it does not exist.\n\n# Installation\nThere are a few ways to use `plates`. Install the library using npm. You can add\nit to your `package.json` file as a dependency, or include the script in your\nHTML page.\n\n# Usage\n\n## Simple case\nBy default, `plates` will try to match the key in the data to an `id` in the\ntag, since both should be unique.\n\n```js\nvar Plates = require('plates');\n\nvar html = '\u003cdiv id=\"test\"\u003eOld Value\u003c/div\u003e';\nvar data = { \"test\": \"New Value\" };\n\nvar output = Plates.bind(html, data);\n```\n\n## Explicit instructions\nA common use case is to apply the new value to each tag's body based on the\n`class` attribute.\n\n```js\nvar html = '\u003cspan class=\"name\"\u003eUser\u003c/span\u003e...\u003cspan class=\"name\"\u003eUser\u003c/span\u003e';\n\nvar data = { \"username\": \"John Smith\" };\nvar map = Plates.Map();\n\nmap.class('name').to('username');\n\nconsole.log(Plates.bind(html, data, map));\n```\n\n## Complex instructions\nAnother common case is to replace the value of an attribute if it is a match.\n\n```js\nvar html = '\u003ca href=\"/\"\u003e\u003c/a\u003e';\n\nvar data = { \"newurl\": \"http://www.nodejitsu.com\" };\nvar map = Plates.Map();\n\nmap.where('href').is('/').insert('newurl');\n\nconsole.log(Plates.bind(html, data, map));\n```\n\nPartial value replacement\n\n```js\nvar html = '\u003ca href=\"/foo/bar\"\u003e\u003c/a\u003e';\n\nvar data = { \"newurl\": \"bazz\" };\nvar map = Plates.Map();\n\nmap.where('href').has(/bar/).insert('newurl'); // `has` can take a regular expression.\n\nconsole.log(Plates.bind(html, data, map));\n```\n\nIn even more complex cases, an arbitrary attribute can be specified. If a value\nis matched, a specific value can be used and then used as another attribute's\nvalue.\n\n```js\nvar html = '\u003cimg data-foo=\"bar\" src=\"\"\u003e\u003c/img\u003e';\n\nvar data = { \"imageurl\": \"http://www.nodejitsu.com\" };\nvar map = Plates.Map();\n\nmap.where('data-foo').is('bar').use('imageurl').as('src');\n\nconsole.log(Plates.bind(html, data, map));\n```\n\n## Collections\n\nPlates can also iterate through collections:\n\n```js\nvar html = '\u003cdiv class=\"name\"\u003e\u003c/div\u003e';\nvar collection = [\n  {'name': 'Louis CK'},\n  {'name': 'Andy Kindler'},\n  {'name': 'Greg Giraldo'}\n];\n\nconsole.log(Plates.bind(html, collection));\n```\n\n## Partials\n\nPlates also supports partials:\n\n```js\nvar partial = '\u003cli class=\"partial\"\u003e\u003c/li\u003e';\nvar base = '\u003cdiv\u003e\u003ch1 class=\"foo\"\u003e\u003c/h1\u003e\u003cul class=\"menu\"\u003e\u003c/ul\u003e\u003c/div\u003e';\n\nvar baseData = { foo: 'bar' };\nvar mapping = Plates.Map();\n\nmapping.class('menu').append(partial);\nconsole.log(Plates.bind(base, baseData, mapping));\n```\n\n# API\n\n## Plates Static Methods\n\n```\nfunction Plates.bind(html, data, map)\n@param html {String} A string of well-formed HTML.\n@param data {Object} A JSON object.\n@param map {Object} An instance of `Plates.Map()`.\n\n@return {String} The result of merging the data and html.\n```\n\n## Map Constructor\n\n```\nfunction Plates.Map(options)\n@options {Object} An object literal that contains configuration options.\n  - @option where {String} The default attribute to match on instead of ID.\n  - @option as {String} The default attribute to replace into.\n@return {Object} An object that represents a reusable map, has mapping methods.\n```\n\n## Map Instance Methods\n\n### where()\n\n```\nfunction Map#where(attribute)\n@param attribute {String} An attribute that may be found in a tag.\n\nThis method will initiate a clause. Once a clause has been established,\nother member methods may be chained to each other in any order.\n```\n\n### class(), className()\n\n```\nfunction Map#class(attribute)\n@param attribute {String} A value that may be found in the `class` attribute of a tag.\n```\n\n### is()\n\n```\nfunction Map#is(value)\n@param value {String} The value of the attribute specified in the `where` clause.\n```\n\n### has()\n\n```\nfunction Map#has(value)\n@param value {String|RegExp} The value of the attribute specified in the `where` clause.\n```\n\n### insert()\n\n```\nfunction Map#insert(attribute)\n@param attribute {String} A string that represents a key. Data will be inserted into\nthe attribute that was specified in the `where` clause.\n```\n\n### use()\n\n```\nfunction Map#use(key)\n@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.\n\nIf a function is provided, it will be passed data, value and tagbody parameters.\n```\n\n### to()\n\n```\nfunction Map#to(key)\n@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.\n\nIf a function is provided, it will be passed data, value and tagbody parameters.\n\nSame as `use` method.\n```\n\n### as()\n\n```\nfunction Map#as(attribute)\n@param attribute {String} A string that represents an attribute in the tag.\n\nIf there is no attribute by that name found, one may be created depending on the options\nthat were passed to the `Map` constructor.\n```\n\n### remove()\n\n```\nfunction Map#remove()\n\nRemoves the matching elements from the template.\n```\n\n### append(), partial()\n\n```\nfunction Map#append(html, data, map)\n@param html {String} A string that represents the new template that needs to be\nadded.\n@param data {Mixed} data for the partial, if it's a string it's a reference to a\nkey in the data structure that was supplied to the main template.\n@param map {Plates.Map} data mapping for the partial.\n\nIf the supplied HTML string doesn't contain any HTML markup we assume that we\nthe given string is the location of the template. When you are using Plates on\nthe browser is assumes that you supplied it with an id selector and will fetch\nthe innerHTML from the element. If you are using Plates in Node.js it assumes\nthat you gave it a file path that is relative to the current working directory.\n```\n\n# License\n\n(The MIT License)\n\nCopyright (c) 2011 Arnout Kazemier, Martijn Swaagman, \u0026 the Contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the 'Software'), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflatiron%2Fplates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflatiron%2Fplates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflatiron%2Fplates/lists"}