data-context-binding
Version:
Simple and lightweight solution for binding data to DOM elements.
207 lines (201 loc) • 9.97 kB
HTML
<html>
<head>
<title>Data Context Binding</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<style>
#list-headers ul {
list-style: none;
padding-left: .5em;
}
#list-headers > ul {
padding: 0;
}
#list-headers h1, h2, h3, h4, h5 {
white-space: nowrap;
}
.markdown-body {
padding-left: 2em;
}
@media (min-width: 992px) {
.vh-lg-100{
height: 100vh ;
}
}
</style>
</head>
<body>
<div class="row w-100">
<div class="col-12 text-center">
<h1 id="data-context-binding">Data Context Binding</h1>
<p>Simple and lightweight solution for binding data to DOM elements.<br>
This manual is also available in <a href="https://manuel-lohmus.github.io/data-context-binding/README.html">HTML5</a>.</p>
</div>
</div>
<div class="row w-100">
<div class="col-lg-3 d-lg-inline">
<div class="sticky-top overflow-auto vh-lg-100">
<div id="list-headers" class="list-group mt-2 ms-lg-2 ms-4">
<h4 id="table-of-contents">Table of contents</h4>
<ul>
<li><a href="#introduction"><strong>Introduction</strong></a></li>
<li><a href="#features"><strong>Features</strong></a></li>
<li><a href="#testing"><strong>Testing</strong></a></li>
<li><a href="#usage"><strong>Usage</strong></a></li>
<li><a href="#references"><strong>References</strong></a></li>
<li><a href="#license"><strong>License</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9 mt-2">
<div class="ps-4 markdown-body" data-bs-spy="scroll" data-bs-target="#list-headers" data-bs-offset="0" tabindex="0">
<h2 id="introduction">Introduction</h2>
<p>Data context binding library for browser.
This library is a simple and lightweight solution for binding data to DOM elements.
Used when building a <strong>single-page application</strong> (<strong>SPA</strong>), this library offers a modern approach.
This module is part of the <a href="https://www.npmjs.com/package/conextra">'conextra'</a> framework,
which is a simple and easy-to-use single-page application (SPA) framework.
You have to try it! A different solution than MVC (model–view–controller).</p>
<p><strong>frontend workflow</strong>: data >
<a href="https://www.npmjs.com/package/data-context">'data-context'</a> >
<a href="https://www.npmjs.com/package/data-context-binding">'data-context-binding'</a> >
DOM elements
<br>
<strong>backend to frontend workflow</strong>: file >
<a href="https://www.npmjs.com/package/fs-broker">'fs-broker'</a> >
<a href="https://www.npmjs.com/package/data-context">'data-context'</a> >
<a href="https://www.npmjs.com/package/ws-user">'ws-user'</a> >
<a href="https://www.npmjs.com/package/tiny-https-server">'tiny-https-server'</a> >
<a href="https://www.npmjs.com/package/ws13">'ws13'</a> >
browser >
<a href="https://www.npmjs.com/package/ws-user">'ws-user'</a> >
<a href="https://www.npmjs.com/package/data-context">'data-context'</a> >
<a href="https://www.npmjs.com/package/data-context-binding">'data-context-binding'</a> >
DOM elements</p>
<blockquote>
<p>Please note, this version is not backward compatible with version 1.x<br>
Requires <a href="https://www.npmjs.com/package/data-context">'data-context'</a> module version 2.x<br>
Note the restrictive requirements of the 'data-context' module.</p>
</blockquote>
<h2 id="features">Features</h2>
<ul>
<li>Bind data to the DOM elements.</li>
<li>template engine for rendering HTML.</li>
<li>Watch for changes in the data and update the DOM elements.</li>
</ul>
<h2 id="testing">Testing</h2>
<p>To test, open the '<a href="https://manuel-lohmus.github.io/data-context-binding/index.test.html">index.test.html</a>' file. The tests will run and the results will be displayed.</p>
<p>or on the command line in the project directory 'data-context-binding':</p>
<p><code>npm test</code></p>
<h2 id="usage">Usage</h2>
<p>This example demonstrates a simple and effective way to bind data to DOM elements using the data-context-binding library.</p>
<p><strong>Summary</strong></p>
<ul>
<li><strong>Import Modules</strong>: Load the required JavaScript libraries.</li>
<li><strong>Add Data</strong>: Define the data in a script tag with type application/json.</li>
<li><strong>Bind Data</strong>: Use path and bind attributes to bind data to DOM elements.</li>
<li><strong>Editable Fields</strong>: Allow users to edit data and reflect changes in real-time.</li>
<li><strong>Live Changes</strong>: Listen for data changes and update the DOM dynamically.</li>
</ul>
<p><a href="https://manuel-lohmus.github.io/data-context-binding/examples/hello-world.html">hello-world.html</a>:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>data-context-binding</title>
<!-- STEP 1. Import the modules 'data-context' and 'data-context-binding'.
Import for an HTML page hosted on the server. -->
<!--<script src="./datacontext.js"></script>-->
<!--<script src="./browser.js"></script>-->
<!-- STEP 1. Import the modules 'data-context' and 'data-context-binding'.
Import for a standalone HTML page. -->
<script async src="https://cdn.jsdelivr.net/npm/data-context"></script>
<script async src="https://cdn.jsdelivr.net/npm/data-context-binding"></script>
<!-- STEP 2. Add the data to a container with the ID 'data'. Its contents will be read automatically. -->
<script id="data" type="application/json">
{
"doc": {
/* 1: The metadata-title context object */
/* 2: The metadata-title context object */
"title": "Hello World", // The title comment
/* The metadata-description context object */
"description": "This is a simple example of data context binding.", // The description comment
/* { "hidden": "This is a must be hidden value." } */
"debug": false
}
}
</script>
</head>
<body>
<!-- STEP 3. Bind data to the DOM elements.
In this container we use the 'doc' object.
The 'path' attribute is part of property path. -->
<div path="doc">
<div>
<!-- STEP 3. Bind data to the DOM elements.
The `path` attribute is property path in the data object.
The `bind` attribute is performed data binding. -->
<h1 path="title" bind>Title</h1>
<!-- STEP 3. Bind data to the DOM elements.
The `path` attribute is property path in the data object.
The `bind` attribute is performed data binding. -->
<p path="description" bind>Description</p>
</div>
</div>
<hr />
<h3>Edit the values:</h3>
<label for="title">Title:</label>
<br />
<!-- STEP 3. Bind data to the DOM elements.
The `path` attribute is property path in the data object.
The `bind` attribute is performed data binding. -->
<input type="text" path="doc.title" bind style="width:380px" />
<br />
<br />
<label>Description:</label>
<br />
<!-- STEP 3. Bind data to the DOM elements.
The `path` attribute is property path in the data object.
The `bind` attribute is performed data binding. -->
<input type="text" path="doc.description" bind style="width:380px" />
<hr />
<label>Live changes:</label>
<br />
<!-- STEP 3. Bind data to the DOM elements.
The `bind` attribute is performed data binding.
Listens for data context changes -->
<textarea cols="50" rows="10" bind="change"></textarea>
</body>
</html>
</code></pre>
<p>Here is also a <a href="https://manuel-lohmus.github.io/data-context-binding/demo.html">DEMO</a></p>
<h2 id="references">References</h2>
<h2 id="license">License</h2>
<p>This project is licensed under the MIT License.</p>
<p>Copyright © Manuel Lõhmus</p>
<p><a href="https://www.paypal.com/donate?hosted_button_id=4ZHDGZVF64YZQ"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt="Donate" /></a></p>
<p>Donations are welcome and will go towards further development of this project.</p>
<br>
<br>
<br>
</div>
</div>
</div>
<script>
(function () {
'use strict';
var isIE = !!document.documentMode; // Detect IE
if (!isIE) {
// list-group style for headers
document.querySelectorAll('#list-headers a')
.forEach(function (a) { a.classList.add('list-group-item', 'list-group-item-action') });
}
})();
</script>
</body>
</html>