https://github.com/z3nz/jquery-watcher
jQuery plugin to write Mustache.js templates in elements and have them update automatically with reactive data.
https://github.com/z3nz/jquery-watcher
data jquery mustache mustache-js mustache-templates react reactive vue watcher
Last synced: 3 months ago
JSON representation
jQuery plugin to write Mustache.js templates in elements and have them update automatically with reactive data.
- Host: GitHub
- URL: https://github.com/z3nz/jquery-watcher
- Owner: z3nz
- Created: 2020-07-13T05:24:46.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:02:57.000Z (almost 3 years ago)
- Last Synced: 2025-07-09T03:12:10.231Z (3 months ago)
- Topics: data, jquery, mustache, mustache-js, mustache-templates, react, reactive, vue, watcher
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/jquery-watcher
- Size: 1.96 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery Watcher 
Write [Mustache.js](https://github.com/janl/mustache.js) templates in elements and have them update automatically with reactive data.
```html
Clicked: {{ count }}
$('button').watcher({ count: 0 }).click(function () {
$(this).watcher().count++
})
$('button').click().text()
// Clicked: 1
```
## Getting Started
### Install as a module
npm:
```shell
npm i jquery-watcher
```
yarn:
```shell
yarn add jquery-watcher
```
Initialize the plugin once in your project:
```javascript
// src/plugins.js
import 'jquery-watcher'
// or
require('jquery-watcher')
```
### CDN
```html
```
## API
### `.watcher(data: Object) => jQuery`
Pass a data object that you want to be reactive. Returns jQuery.
This will immediately render your template.
```html
Hello {{ value }}
$('div').watcher({ value: 'World' }).text()
// Hello World
$('div').watcher({ value: 'Adam' }).text()
// Hello Adam
```
All of your nested objects will also be reactive.
```html
{{ nested.bird }}
const { nested } = $('div').watcher({ nested: { bird: '' } }).watcher()
nested.bird = 'Robin'
$('div').text()
// Robin
```
Arrays too!
```html
{{ #starks }}
{{.}}
{{ /starks }}
const { starks } = $('div').watcher({ starks: ['Ned', 'Sansa', 'Bran', 'Jon'] }).watcher()
starks.pop()
$('div').html()
/*
<p>Ned</p>
<p>Sansa</p>
<p>Bran</p>
*/
```
### `.watcher() => Object`
If no argument is passed, it will return the reactive data object.
If you manipulate the properties on the reactive object, it will automatically re-render your template.
```html
Hello {{ text }}
const data = $('div').watcher({ text: 'World' }).watcher()
data.text = 'Adam'
$('div').text()
// Hello Adam
```
### `.watcher() => [Object, ...]`
If there is more than one element, it will return an array of reactive data objects.
```html
{{ hero }}
{{ hero }}
// [{ hero: 'Superman' }, { hero: 'Superman' }]
const [div1, div2] = $('div').watcher({ hero: 'Superman' }).watcher()
div2.hero = 'Batman'
$('div:nth-child(1)').text()
// Superman
$('div:nth-child(2)').text()
// Batman
```
## Actions
### `.watcher('set_template', template: String) => jQuery`
Sets a new template on the element. Second argument is your string template. Returns jQuery.
This will immediately render your new template if there's data.
```html
{{ things.0 }}
const { things } = $('div').watcher({ things: ['Thing 1'] }).watcher()
$('div').text()
// Thing 1
things.push('Thing 2')
$('div').watcher('set_template', '{{ things.0 }} & {{ things.1 }}').text()
// Thing 1 & Thing 2
```
### `.watcher('render') => jQuery`
Renders your template. Useful if you set your template via `.html()`. Returns jQuery.
```html
$('div')
.watcher({ hello: 'world' })
.html('{{ hello }}')
.watcher('render')
.text()
// world
```
## TODOs
- [x] CDN
- [X] Reactive arrays
- [X] Allow template modification
- [ ] Config options