Installation

Minified CDN version 


<script src="https://cdn.jsdelivr.net/gh/MystPi/bridge/src/bridge.min.js"></script>

Dev CDN version 


<script src="https://cdn.jsdelivr.net/gh/MystPi/bridge/src/bridge.js"></script>

Download


Download bridge.min.js Download bridge.js

Usage

Basics


1. Initialize a Bridge between an element 


// In this case, the element is 'body'
let bridge = new Bridge('body');

// You can use CSS selectors too
// bridge = new Bridge('p.logo');

2. Put placeholders in your HTML code 


<body>
  <!-- Placeholders are surrounded by curly braces ({}) -->
  <p>\{{text}}</p>
</body>

3. Cross (send data) over the bridge 


bridge.cross({text: 'Hello Bridge!'});

// You can cross the bridge as many times as you want
// bridge.cross({text: 'Hello, world!'});
// You can also send as much data as you want
// bridge.cross({text: 'Hello!', number: 42});

4. Done! The \{{text}} placeholder has been replaced with 'Hello Bridge!'


Hello Bridge!


Escaping


There are times when you might want to literally show a placeholder. To do this, just put a backslash (\) in front of the placeholder: 


<p>\\{{text}}</p>