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