jquery-watcher
v1.3.0
Published
Write Mustache.js templates in elements and have them update automatically with reactive data.
Downloads
15
Maintainers
Readme
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()
// Clicked: 1
</script>
Getting Started
Install as a module
npm:
npm i jquery-watcher
yarn:
yarn add jquery-watcher
Initialize the plugin once in your project:
// src/plugins.js
import 'jquery-watcher'
// or
require('jquery-watcher')
CDN
<!-- 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>
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()
// 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>
.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()
// Hello Adam
</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>
// [{ 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>
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()
// Thing 1
things.push('Thing 2')
$('div').watcher('set_template', '{{ things.0 }} & {{ things.1 }}').text()
// Thing 1 & Thing 2
</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()
// world
</script>
TODOs
- [x] CDN
- [X] Reactive arrays
- [X] Allow template modification
- [ ] Config options