Data binding

As explained in Web Components in Action

Data binding is a technique for synchronizing application data with a user interface or component state.

Data binding synchronizes application data with a user interface or component state. Frameworks commonly provide it alongside MVC patterns and other application-structure features, while plain JavaScript and Web Components leave the choice of pattern to the developer. section 1.3 section 14.1

Use data binding as one option within a broader application data-flow design:

• Choose a framework when its data-binding and state-management conventions fit the application. section 1.3 section 14.1
• Prefer simpler JavaScript patterns when a larger framework would add unnecessary structure; an event bus can route changes between distant components. section 1.3
• Treat native data-binding support cautiously: Object.observe was deprecated and was not adopted by popular frameworks for their state-management solutions. section 14.1

A component hierarchy

A color picker can contain text inputs and sliders whose changes reach the parent component, which then reports the resulting color to its parent. As components become separated in the DOM, direct event bubbling may no longer suit the data flow, making a different coordination strategy useful. section 1.3

Figure 14.1. Deprecated data binding feature: Object.observe

Inspect the deprecated Object.observe approach as historical context for native JavaScript data binding. section 14.1

How Web Components in Action covers it

How deep it goes

Contrasts framework offerings with no-framework alternatives but stops short of implementing a binding mechanism.

Examples

Uses nested color-picker inputs, DOM event bubbling, event buses, and deprecated Object.observe as concrete reference points.

What it assumes

Assumes familiarity with JavaScript, DOM events, Web Components, and component hierarchies.

What you can do after

Evaluate whether framework data binding or simpler event and state-management patterns better fit a component application.

How it connects

Connects data binding with Web Components, MVC, event buses, Redux, and application state management.

liveBookmanning.com

Read Web Components in Action on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  D3.js in Action, Third EditionData binding is a pattern that associates data values with document elements so the elements can be generated or updated from those values.
• 

  liveBookmanning.com
  .NET MAUI in ActionData binding is a technique that connects user-interface properties to source-object properties or commands so values and actions can be synchronized.
• 

  liveBookmanning.com
  Pro Angular 16Data binding is a technique that connects application data with a user-interface representation so changes can be reflected between them.
• 

  liveBookmanning.com
  Pro ASP.NET Core 7, Tenth EditionA Blazor component binding that associates a component value parameter with a property on the edited model.

Compare how 5 books explain data binding →

Related concepts

• binding source propertyuses · A binding source property is the property whose value is propagated by a data binding to its target property.
• view modeluses · A view model is a data structure that supplies a user-interface view with the data required to render a particular output.
• component templateuses · An Angular component template is declarative, HTML-based markup containing expressions and bindings that define a component’s rendered view.
• buttonproduces · A button is an interactive user-interface control that can be activated to initiate an action or select an option.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.