{"id":16548012,"url":"https://github.com/dgraham/stache-bind","last_synced_at":"2025-10-28T16:31:54.407Z","repository":{"id":57369140,"uuid":"49011847","full_name":"dgraham/stache-bind","owner":"dgraham","description":"Minimum viable mustache data binding.","archived":false,"fork":false,"pushed_at":"2020-07-25T00:24:24.000Z","size":96,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-09T19:28:19.269Z","etag":null,"topics":["mustache"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/dgraham.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":"2016-01-04T17:20:50.000Z","updated_at":"2021-02-23T20:45:42.000Z","dependencies_parsed_at":"2022-09-09T18:20:31.357Z","dependency_job_id":null,"html_url":"https://github.com/dgraham/stache-bind","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgraham%2Fstache-bind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgraham%2Fstache-bind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgraham%2Fstache-bind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgraham%2Fstache-bind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgraham","download_url":"https://codeload.github.com/dgraham/stache-bind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219859152,"owners_count":16556037,"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":["mustache"],"created_at":"2024-10-11T19:24:29.186Z","updated_at":"2025-10-28T16:31:54.038Z","avatar_url":"https://github.com/dgraham.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mustache data binding\n\nSimple [data binding][binding] with [Mustache][mustache] templates.\n\n[mustache]: https://mustache.github.io\n[binding]: https://en.wikipedia.org/wiki/Data_binding\n\n## Motivation\n\nWeb applications frequently need to reflect changes to model data in the\nview presented to the user. This is commonly done with many calls to\n`document.querySelector`, followed by attribute assignments.\n\n```js\n// Model data.\nconst user = {name: 'Hubot', login: 'hubot', avatar: 'https://github.com/hubot.png'};\n\n// Display the model in the view.\nconst link = document.querySelector('.avatar-link');\nlink.setAttribute('title', user.login);\nlink.setAttribute('href', user.url);\n\nconst image = link.querySelector('.avatar');\nimage.setAttribute('alt', user.login);\nimage.src = user.avatar;\n```\n\nWhen the `user` model data changes, all elements that depend on those values\nmust be found and reassigned. This style becomes difficult to maintain\nas the number of templates and models grows. And design changes\nto the markup require a careful inspection of the corresponding JavaScript\nselectors to ensure they stay in sync.\n\nSo while an ad hoc solution works well as a starting point, we often want\na reusable pattern as an app becomes more complex.\n\n## Data binding\n\nOne solution is to apply the [Model-view-controller][mvc] design\npattern and bind the view (DOM nodes) as observers of model data. When\nthe model changes, it notifies the observers, and updated values appear\nin the page.\n\nThis library provides one-way data binding: data flows from the model into the\nview, as in MVC. Some other frameworks implement *two-way* data binding,\npropagating changes in the view, typically from an `\u003cinput\u003e` element or\n`click` event, directly back into the model.\n\nOne-way data binding prescribes no method of moving view changes into the\nmodel, but a representative controller looks like the following example.\n\n```js\n// The controller in one-way data binding.\nconst input = document.querySelector('.name-input');\ninput.addEventListener('change', function(event) {\n  // Update the model, transform data, notify other components, etc.\n  user.name = input.value;\n});\n```\n\n[mvc]: https://en.wikipedia.org/wiki/Model–view–controller\n\n## Usage\n\nStore markup templates in the page with a unique `data-name` attribute.\n\n```html\n\u003ctemplate data-name=\"avatar\"\u003e\n  \u003cdiv class=\"avatar-container\" data-id=\"{{ id }}\" data-user=\"{{ user.login }}\"\u003e\n    \u003ca class=\"avatar-link\" href=\"{{ user.url }}\" title=\"{{ user.login }}\" target=\"_blank\"\u003e\n      \u003cdiv class=\"avatar-frame\"\u003e\n        \u003cimg class=\"avatar photo\" alt=\"{{ user.login }}\" src=\"{{ user.avatar }}\" height=\"230\" width=\"230\"\u003e\n      \u003c/div\u003e\n      \u003ch1 class=\"name\"\u003e{{ user.name }}\u003c/h1\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nBind a model object—Mustache calls this a context—to a template.\n\n```js\nimport {template} from 'stache-bind';\n\nconst context = {\n  id: 42,\n  user: {\n    name: 'Hubot',\n    login: 'hubot',\n    url: 'https://github.com/hubot',\n    avatar: 'https://github.com/hubot.png?size=460'\n  }\n};\n\n// Create a single template function using its data-name.\nconst avatar = template('avatar');\n\n// Build a new DocumentFragment from the template, bound to the model data.\nconst fragment = avatar(context);\n\n// Display the new fragment in the page.\ndocument.body.appendChild(fragment);\n\n// Sometime later the model data changes, and the view is updated.\ncontext.user.name = 'Bender';\n```\n\nAny JavaScript object may be used as the template's rendering context.\n\n## Limitations\n\nThis is a minimally viable Mustache parser, and only the `{{ }}` stache syntax\nis currently supported. As [browser support][proxy-support] for [`Proxy`][proxy]\nimproves, it can be used to observe `Array` mutations and implement\nthe `{{#}} {{/}}` iterator section syntax.\n\n[proxy]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy\n[proxy-support]: http://caniuse.com/#feat=proxy\n\n## Development\n\n```\nnpm install\nnpm test\n```\n\n## Alternatives\n\nA sample of full-fledged JavaScript data binding frameworks.\n\n- [Ember](https://emberjs.com)\n- [React](https://reactjs.org)\n- [Vue](https://vuejs.org)\n\n## License\n\nDistributed under the MIT license. See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgraham%2Fstache-bind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgraham%2Fstache-bind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgraham%2Fstache-bind/lists"}