Write Mustache.js templates in elements and have them update automatically with reactive data.
<button>Clicked: {{ count }}</button>
<script>
$('button').watcher({ count: 0 }).click(function () {
$(this).watcher().count
})
$('button').click().text()
// Clicked: 1
</script>
npm:
npm i jquery-watcheryarn:
yarn add jquery-watcherInitialize the plugin once in your project:
// src/plugins.js
import 'jquery-watcher'
// or
require('jquery-watcher')<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- Mustache.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mustache.min.js"></script>
<!-- jQuery Watcher -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-watcher.min.js"></script>Pass a data object that you want to be reactive. Returns jQuery.
This will immediately render your template.
<div>Hello {{ value }}</div>
<script>
$('div').watcher({ value: 'World' }).text()
// Hello World
$('div').watcher({ value: 'Adam' }).text()
// Hello Adam
</script>All of your nested objects will also be reactive.
<div>{{ nested.bird }}</div>
<script>
const { nested } = $('div').watcher({ nested: { bird: '' } }).watcher()
nested.bird = 'Robin'
$('div').text()
// Robin
</script>Arrays too!
<div>
{{ #starks }}
<p>{{.}}</p>
{{ /starks }}
</div>
<script>
const { starks } = $('div').watcher({ starks: ['Ned', 'Sansa', 'Bran', 'Jon'] }).watcher()
starks.pop()
$('div').html()
/*
<p>Ned</p>
<p>Sansa</p>
<p>Bran</p>
*/
</script>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.
<div>Hello {{ text }}</div>
<script>
const data = $('div').watcher({ text: 'World' }).watcher()
data.text = 'Adam'
$('div').text()
// Hello Adam
</script>If there is more than one element, it will return an array of reactive data objects.
<div>{{ hero }}</div>
<div>{{ hero }}</div>
<script>
// [{ 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
</script>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.
<div>{{ things.0 }}</div>
<script>
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
</script>Renders your template. Useful if you set your template via .html(). Returns jQuery.
<div></div>
<script>
$('div')
.watcher({ hello: 'world' })
.html('{{ hello }}')
.watcher('render')
.text()
// world
</script>- CDN
- Reactive arrays
- Allow template modification
- Config options