simple-data-binding

Light-weight, stand-alone, incredibly simple utility for two-way data binding.

Frameworks are fine, but sometimes when you have a nail to drive in, you just want a hammer, not an aircraft carrier.

Two-way data-binding is a powerful tool. Ideally, it can eliminate direct DOM references entirely, leading to script which is concise, well organized, and in sync with server-side code.

Two-way data-binding has been a key selling point for many JavaScript frameworks, but it shouldn't be sole justification for adopting a framework. Frameworks have their costs. They are increasingly complex, short-lived, and weighty.

Simple Data Binding offers two-way data-binding à la carte but still offers all the tools required to render complex dynamic pages: templates, watches, attribute-based methods (directives), and much more.

Check out the CODEPEN examples and user's guide.

Objectives:

• Dependency-free – Built in vanilla JavaScript.
• Straightforward timing mechanisms – No polling, no intervals.
• Light-weight – Currently weighing in at 11.4kb (3.8kb zipped) for the full version with live arrays.
• Jargon-free – Simple, meaningful method and property names that don't feel like learning a foreign language.
• Intuitive – Geared towards rapid time to market. A learning curve that feels comfortable in minutes, not months.
• Powerful – Geared towards advanced form field operations like dynamic options and question branching.
• Scaleable – Performant under conditions that exceed the upper limits of reasonable DOM size and complexity.
• Extensible – Create your own templates, watches and attribute based methods easily for unique data-binding needs and beyond.

How it Works

Under the hood, SimpleDataBinding relies on the MutationObserver API (Supported in all major modern browsers and IE >= 11) combined with data attributes. A new SimpleDataBinding instance receives a container and a data object as arguments. All prmimitives in the data object are treated as strings and stored in the dataset DomStringMap property of the container element, and the instance's data property is a pointer to that dataset. Therefore any changes to the instance's data property automatically change the data attribute of the container, and these changes are captured by a MutationObserver. In this way, any part of the DOM which references a data property via double curley braces or the supplied value of a "directive" (a method dictated by an expando attribute) can be synchronized when the value of the corresponding data property changes. Delegated listeners capture changes to control values within the container and update data to complete two way binding.

Key Concepts

• The most important properties of a binding instance are its container and its data.
• myBinding.containeris a DOM element which will be parsed and synchronized with data.
• myBinding.datais a DOMStringMap with values to synchronize to. It is flat, and all properties are strings.
• Controls within a container are automatically synchronized with data properties corresponding to their name attributres, and their initial values are captured in data.
• If the initial data argument supplied to a binding instance contains nested objects, they spawn new bindings.
• If the initial data argument supplied to a binding instance contains nested arrays, they spawn arrays of new bindings.
• SimpleDataBinding requires no repeat methods, because repeition is dictated by arrays in the initial data argument.
• SimpleDataBinding requires no specific methods to dynamically control CSS because all data values are accessible in CSS as data attributes.