jQuery Watcher
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()
</script>
Getting Started
Install as a module
npm:
npm i jquery-watcher
yarn:
yarn add jquery-watcher
Initialize the plugin once in your project:
import 'jquery-watcher'
require('jquery-watcher')
CDN
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mustache@4.0.1/mustache.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-watcher@1.3.0/dist/jquery-watcher.min.js"></script>
API
.watcher(data: Object) => jQuery
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()
$('div').watcher({ value: 'Adam' }).text()
</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()
</script>
Arrays too!
<div>
{{ #starks }}
<p>{{.}}</p>
{{ /starks }}
</div>
<script>
const { starks } = $('div').watcher({ starks: ['Ned', 'Sansa', 'Bran', 'Jon'] }).watcher()
starks.pop()
$('div').html()
</script>
.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.
<div>Hello {{ text }}</div>
<script>
const data = $('div').watcher({ text: 'World' }).watcher()
data.text = 'Adam'
$('div').text()
</script>
.watcher() => [Object, ...]
If there is more than one element, it will return an array of reactive data objects.
<div>{{ hero }}</div>
<div>{{ hero }}</div>
<script>
const [div1, div2] = $('div').watcher({ hero: 'Superman' }).watcher()
div2.hero = 'Batman'
$('div:nth-child(1)').text()
$('div:nth-child(2)').text()
</script>
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.
<div>{{ things.0 }}</div>
<script>
const { things } = $('div').watcher({ things: ['Thing 1'] }).watcher()
$('div').text()
things.push('Thing 2')
$('div').watcher('set_template', '{{ things.0 }} & {{ things.1 }}').text()
</script>
.watcher('render') => jQuery
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()
</script>
TODOs