## Introduction Data context binding library for browser. This library is a simple and lightweight solution for binding data to DOM elements. Used when building a **single-page application** (**SPA**), this library offers a modern approach. This module is part of the ['conextra'](https://www.npmjs.com/package/conextra) 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). **frontend workflow**: data > ['data-context'](https://www.npmjs.com/package/data-context) > ['data-context-binding'](https://www.npmjs.com/package/data-context-binding) > DOM elements
**backend to frontend workflow**: file > ['fs-broker'](https://www.npmjs.com/package/fs-broker) > ['data-context'](https://www.npmjs.com/package/data-context) > ['ws-user'](https://www.npmjs.com/package/ws-user) > ['tiny-https-server'](https://www.npmjs.com/package/tiny-https-server) > ['ws13'](https://www.npmjs.com/package/ws13) > browser > ['ws-user'](https://www.npmjs.com/package/ws-user) > ['data-context'](https://www.npmjs.com/package/data-context) > ['data-context-binding'](https://www.npmjs.com/package/data-context-binding) > DOM elements > Please note, this version is not backward compatible with version 1.x
> Requires ['data-context'](https://www.npmjs.com/package/data-context) module version 2.x
> Note the restrictive requirements of the 'data-context' module. ## Features - Bind data to the DOM elements. - template engine for rendering HTML. - Watch for changes in the data and update the DOM elements. ## Testing To test, open the '[index.test.html](https://manuel-lohmus.github.io/data-context-binding/index.test.html)' file. The tests will run and the results will be displayed. or on the command line in the project directory 'data-context-binding': `npm test` ## Usage This example demonstrates a simple and effective way to bind data to DOM elements using the data-context-binding library. **Summary** - **Import Modules**: Load the required JavaScript libraries. - **Add Data**: Define the data in a script tag with type application/json. - **Bind Data**: Use path and bind attributes to bind data to DOM elements. - **Editable Fields**: Allow users to edit data and reflect changes in real-time. - **Live Changes**: Listen for data changes and update the DOM dynamically. [hello-world.html](https://manuel-lohmus.github.io/data-context-binding/examples/hello-world.html): ```html <!DOCTYPE html> data-context-binding

Title

Description

Edit the values:

Title:

Description:

Live changes:
``` Here is also a [DEMO](https://manuel-lohmus.github.io/data-context-binding/demo.html) ## References ## License This project is licensed under the MIT License. Copyright © Manuel Lõhmus [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/donate?hosted_button_id=4ZHDGZVF64YZQ) Donations are welcome and will go towards further development of this project.