{"id":29742560,"url":"https://github.com/z3nz/jquery-watcher","last_synced_at":"2025-07-26T02:46:22.606Z","repository":{"id":40756032,"uuid":"279218404","full_name":"z3nz/jquery-watcher","owner":"z3nz","description":"jQuery plugin to write Mustache.js templates in elements and have them update automatically with reactive data.","archived":false,"fork":false,"pushed_at":"2023-01-07T20:02:57.000Z","size":2059,"stargazers_count":4,"open_issues_count":14,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-09T03:12:10.231Z","etag":null,"topics":["data","jquery","mustache","mustache-js","mustache-templates","react","reactive","vue","watcher"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/jquery-watcher","language":"JavaScript","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/z3nz.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}},"created_at":"2020-07-13T05:24:46.000Z","updated_at":"2021-05-13T10:02:04.000Z","dependencies_parsed_at":"2023-02-08T00:02:11.068Z","dependency_job_id":null,"html_url":"https://github.com/z3nz/jquery-watcher","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/z3nz/jquery-watcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3nz%2Fjquery-watcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3nz%2Fjquery-watcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3nz%2Fjquery-watcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3nz%2Fjquery-watcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/z3nz","download_url":"https://codeload.github.com/z3nz/jquery-watcher/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/z3nz%2Fjquery-watcher/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267109328,"owners_count":24037619,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["data","jquery","mustache","mustache-js","mustache-templates","react","reactive","vue","watcher"],"created_at":"2025-07-26T02:46:18.973Z","updated_at":"2025-07-26T02:46:22.579Z","avatar_url":"https://github.com/z3nz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Watcher \u003ca href=\"https://codecov.io/github/z3nz/jquery-watcher?branch=master\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/z3nz/jquery-watcher/master.svg\" alt=\"Coverage Status\"\u003e\u003c/a\u003e\n\nWrite [Mustache.js](https://github.com/janl/mustache.js) templates in elements and have them update automatically with reactive data.\n\n```html\n\u003cbutton\u003eClicked: {{ count }}\u003c/button\u003e\n\n\u003cscript\u003e\n$('button').watcher({ count: 0 }).click(function () {\n  $(this).watcher().count++\n})\n\n$('button').click().text()\n// Clicked: 1\n\u003c/script\u003e\n```\n\n![](https://i.imgur.com/Uz3JNfw.gif)\n\n## Getting Started\n\n### Install as a module\n\nnpm:\n```shell\nnpm i jquery-watcher\n```\n\nyarn:\n```shell\nyarn add jquery-watcher\n```\n\nInitialize the plugin once in your project:\n```javascript\n// src/plugins.js\n\nimport 'jquery-watcher'\n\n// or\n\nrequire('jquery-watcher')\n```\n\n### CDN\n\n```html\n\u003c!-- jQuery --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Mustache.js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/mustache@4.0.1/mustache.min.js\"\u003e\u003c/script\u003e\n\u003c!-- jQuery Watcher --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jquery-watcher@1.3.0/dist/jquery-watcher.min.js\"\u003e\u003c/script\u003e\n```\n\n## API\n\n### `.watcher(data: Object) =\u003e jQuery`\n\nPass a data object that you want to be reactive. Returns jQuery.\u003cbr\u003e\nThis will immediately render your template.\n\n```html\n\u003cdiv\u003eHello {{ value }}\u003c/div\u003e\n\n\u003cscript\u003e\n$('div').watcher({ value: 'World' }).text()\n// Hello World\n\n$('div').watcher({ value: 'Adam' }).text()\n// Hello Adam\n\u003c/script\u003e\n```\n\nAll of your nested objects will also be reactive.\n\n```html\n\u003cdiv\u003e{{ nested.bird }}\u003c/div\u003e\n\n\u003cscript\u003e\nconst { nested } = $('div').watcher({ nested: { bird: '' } }).watcher()\n\nnested.bird = 'Robin'\n\n$('div').text()\n// Robin\n\u003c/script\u003e\n```\n\nArrays too!\n\n```html\n\u003cdiv\u003e\n  {{ #starks }}\n  \u003cp\u003e{{.}}\u003c/p\u003e\n  {{ /starks }}\n\u003c/div\u003e\n\n\u003cscript\u003e\nconst { starks } = $('div').watcher({ starks: ['Ned', 'Sansa', 'Bran', 'Jon'] }).watcher()\n\nstarks.pop()\n\n$('div').html()\n/*\n\u003cp\u003eNed\u003c/p\u003e\n\u003cp\u003eSansa\u003c/p\u003e\n\u003cp\u003eBran\u003c/p\u003e\n*/\n\u003c/script\u003e\n```\n\n### `.watcher() =\u003e Object`\n\nIf no argument is passed, it will return the reactive data object.\u003cbr\u003e\nIf you manipulate the properties on the reactive object, it will automatically re-render your template.\n\n```html\n\u003cdiv\u003eHello {{ text }}\u003c/div\u003e\n\n\u003cscript\u003e\nconst data = $('div').watcher({ text: 'World' }).watcher()\n\ndata.text = 'Adam'\n\n$('div').text()\n// Hello Adam\n\u003c/script\u003e\n```\n\n### `.watcher() =\u003e [Object, ...]`\n\nIf there is more than one element, it will return an array of reactive data objects.\n\n```html\n\u003cdiv\u003e{{ hero }}\u003c/div\u003e\n\u003cdiv\u003e{{ hero }}\u003c/div\u003e\n\n\u003cscript\u003e\n// [{ hero: 'Superman' }, { hero: 'Superman' }]\nconst [div1, div2] = $('div').watcher({ hero: 'Superman' }).watcher()\n\ndiv2.hero = 'Batman'\n\n$('div:nth-child(1)').text()\n// Superman\n\n$('div:nth-child(2)').text()\n// Batman\n\u003c/script\u003e\n```\n\n## Actions\n\n### `.watcher('set_template', template: String) =\u003e jQuery`\n\nSets a new template on the element. Second argument is your string template. Returns jQuery.\u003cbr\u003e\nThis will immediately render your new template if there's data.\n\n```html\n\u003cdiv\u003e{{ things.0 }}\u003c/div\u003e\n\n\u003cscript\u003e\nconst { things } = $('div').watcher({ things: ['Thing 1'] }).watcher()\n$('div').text()\n// Thing 1\n\nthings.push('Thing 2')\n$('div').watcher('set_template', '{{ things.0 }} \u0026 {{ things.1 }}').text()\n// Thing 1 \u0026 Thing 2\n\u003c/script\u003e\n```\n\n### `.watcher('render') =\u003e jQuery`\n\nRenders your template. Useful if you set your template via `.html()`. Returns jQuery.\n\n```html\n\u003cdiv\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n$('div')\n  .watcher({ hello: 'world' })\n  .html('{{ hello }}')\n  .watcher('render')\n  .text()\n// world\n\u003c/script\u003e\n```\n\n## TODOs\n\n- [x] CDN\n- [X] Reactive arrays\n- [X] Allow template modification\n- [ ] Config options\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz3nz%2Fjquery-watcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fz3nz%2Fjquery-watcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fz3nz%2Fjquery-watcher/lists"}