{"id":15536796,"url":"https://github.com/trentmwillis/bound-template","last_synced_at":"2025-07-14T04:15:53.480Z","repository":{"id":65996636,"uuid":"107219509","full_name":"trentmwillis/bound-template","owner":"trentmwillis","description":"A micro-library for binding data to HTML Templates","archived":false,"fork":false,"pushed_at":"2018-01-11T01:40:29.000Z","size":55,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T23:06:04.424Z","etag":null,"topics":["custom-elements","data-binding","html-template","javascript","micro-library"],"latest_commit_sha":null,"homepage":"http://pretty-okay.com/bound-template","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trentmwillis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-17T04:52:58.000Z","updated_at":"2021-02-23T00:19:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"2a687663-9e5a-4043-84e9-5773a17c206d","html_url":"https://github.com/trentmwillis/bound-template","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":0.36,"last_synced_commit":"370fca5d37a97fe0944e7be2e64fd4987d8dcee9"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fbound-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fbound-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fbound-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trentmwillis%2Fbound-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trentmwillis","download_url":"https://codeload.github.com/trentmwillis/bound-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250457778,"owners_count":21433734,"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":["custom-elements","data-binding","html-template","javascript","micro-library"],"created_at":"2024-10-02T11:53:31.758Z","updated_at":"2025-04-23T15:21:23.386Z","avatar_url":"https://github.com/trentmwillis.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BoundTemplate\n\n[![Build Status](https://travis-ci.org/trentmwillis/bound-template.svg?branch=master)](https://travis-ci.org/trentmwillis/bound-template)\n[![npm version](https://badge.fury.io/js/bound-template.svg)](https://badge.fury.io/js/bound-template)\n\nA micro-library for binding data to [HTML Templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n\n## Goals\n\nThis library only aims to accomplish three things:\n\n1. Provide a simple method of _inserting data_ in HTML Templates. This means no logic and no two-way bindings.\n2. Efficiently update bound data by operating on the smallest number of Nodes possible.\n3. Do 1 \u0026 2 with as little code as possible while keeping the source code clear \u0026 readable.\n\nThat's it. The goals may change in the future, but for now the overarching theme is simplicity and doing one thing (data insertion) well.\n\n## Syntax\n\nThe syntax to bind a value to the DOM is simple: `{{name}}`. You can bind to element attributes as well as text nodes.\n\n```html\n\u003ctemplate id=\"greeting\"\u003e\n  \u003cp class=\"{{color}} greeting\"\u003eHello, {{name}}!\u003c/p\u003e\n\u003c/template\u003e\n```\n\nYou can bind multiple values as well:\n\n```html\n\u003ctemplate id=\"greeting\"\u003e\n  \u003cp class=\"{{color}} {{type}}\"\u003e{{greeting}}, {{name}}!\u003c/p\u003e\n\u003c/template\u003e\n```\n\nBoth text nodes and element attributes are coerced to `string` values before being inserted into the DOM. While this is obvious for text nodes, it is important to note this behavior for attributes as well (which can [only return `null` or `string` values](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)).\n\nIf you want to bind non-string values, then you can bind directly to an element's properties by appending `$` to an attribute name:\n\n```html\n\u003cp my-prop$={{data}}\u003e\u003c/p\u003e\n```\n\nProperties will not appear in the DOM, but instead are set on a `props` property on the specified element. In other words, after rendering the above you might get:\n\n```javascript\nconsole.log(document.querySelector('p').props.data); // Logs the value of `data`, not coerced.\n```\n\nThe special syntax makes it obvious that the value will be applied to a property and not an attribute. Note that you cannot apply more than one binding to a property. If more than one is specified, the subsequent bindings will simply be ignored.\n\nFinally, you can also bind event handlers using the `on-` prefix:\n\n```html\n\u003cp on-click={{clickHandler}}\u003e\u003c/p\u003e\n```\n\nAnytime the binding for an event handler is updated, the old handler will be removed and the new one attached.\n\n## Usage\n\nThe API surface is relatively small and thus simple to use.\n\nTo get started, simply pass a reference to a template you would like to bind into the `BoundTemplate` constructor (the only export from this package):\n\n```javascript\nconst template = document.getElementById('greeting');\nconst boundTemplate = new BoundTemplate(template);\n```\n\nThe resulting `boundTemplate` object is a factory function with only one method, `create()`:\n\n```javascript\nconst [instance, bindings] = boundTemplate.create();\n```\n\n`create()` will return a cloned instance of the template, which you can then insert into the DOM, and a bindings object which allows you to set values directly into the template instance:\n\n```javascript\n// Insert template instance into DOM\ncomponent.shadowRoot.appendChild(instance);\n\n// Update data in the DOM\nbindings.set('color', 'red');\nbindings.set('name', 'Zelda');\n```\n\nYou can optionally pass an object to `create` which will be used to instantiate the bindings to default values:\n\n```javascript\nconst [instance, bindings] = boundTemplate.create({\n  color: 'red',\n  name: 'Zelda'\n});\n```\n\nSimilarly, you can set multiple values at a time by passing an object to the `setData` function:\n\n```javascript\nbindings.setData({\n  color: 'red',\n  name: 'Zelda'\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrentmwillis%2Fbound-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrentmwillis%2Fbound-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrentmwillis%2Fbound-template/lists"}