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/jquery@3.5.1/dist/jquery.min.js"></script> <!-- Mustache.js --> <script src="https://cdn.jsdelivr.net/npm/mustache@4.0.1/mustache.min.js"></script> <!-- jQuery Watcher --> <script src="https://cdn.jsdelivr.net/npm/jquery-watcher@1.2.0/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>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>- CDN
- Reactive arrays
- Allow template modification
- Config options