What exactly is a binding?

Question

I have been seeing the term "binding" and "live-binding" more and more recently, especially in JavaScript frameworks like Ember.js, Can.js, Knockout.js, and Backbone.js, and more traditionally, in Cocoa and Objective-C, and wonder what exactly a binding is? (and what exactly is a "live-binding"?).

It seems that from a loose sense, we can "bind A to B", and then we can say, "A is bound to B", and that means changes in B will be reflected in A -- automatically, without the user worrying having to set up an observer but the observer is set up earlier automatically and notified automatically when B changes.

And when we do that, we are creating a "binding".

And from a stricter sense, it seems the Cocoa and Objective-C defines it like this: a binding is a property foo of Object A, and this property observes and get changed to the value of property bar of object B. How it happens, we don't care and it is supposed to be hidden (like a black box), and usually it is implemented by the Observer Pattern. So the word "binding" actually means a "property", not an action -- and this property observes and get changed to the same value as the other property has.

And this binding is not limited to UI elements being bound to data. It can be an outer, larger UI element that contains a smaller piece of UI element, and the outer UI element has a property that is bound to the inner UI element property. Or it can be one non-UI data property bound to another non-UI data property.

Is this what a binding is exactly? And what about a live-binding?

Answer 1

The term 'binding' mostly used in client side development. Take for example you create a html webpage that show the temperature.

<div id="temp_value"> 77 °F </div>

Now you want to update this value as the temperature changes while you continuously make an AJAX request to the temperature provider API. In that response you receive a temperature value which should update your UI accordingly.

This need to update the HTML with the Javascript variable or similar gave rise to the concept of binding.

When you create something that keep your DOM in Sync with the change in any JS variable that can be DOM - Variable pair can be said as bind to each other.

There is also a term called two-way binding where any change in DOM updates the binded JS variable and vice-versa.

Answer 2

It's not dissimilar from the original use of the .bind method in vanilla javascript: you bind the scope of an object to a method.

Consider this.iterable.map( this.flush ) and this.iterable.map( this.flush.bind(this)). In the first, we're simple running a method on each interation of the iterable property on this - but in order for the this.flush method to access the this property, you must bind it to this.

In the same way, in frameworks like Ember, the model is a declaration. In order to populate that model from a remote source, you need an instance. In order to modify the model from handlebars, you need an instance. If your UI changes immediately effect the model instance - they're bound.

Pseudo-coded: UI.view.bind(modelInstance) RemoteSource.bind(modelInstance)

"Live-Binding", in my experience, is the binding of the data to the remote source immediately on change in the UI.

Pseudo-coded: UI.view.bind(modelInstance) RemoteSource.bind(modelInstance) modelInstance.onChange(RemoteSource.update.bind(modelInstance))

Answer 3

Binding in a very simple sense means to link, suppose you have a progress bar and a variable X, each time you tap a button the value of X increments. using Binding you can take the value of X(each time it increments) and show it on the progress bar. In the following line of code in C# "pb" is the progressbar and TapCount is the variable where total taps are being saved. It shows the value of "pb" has been bound to the variable TapCount

public void tapping
{    
 pb.Value = TapCount; 
}

Answer 4

I'm not sure of the history, but my guess would be that the term "binding" in this sense sprang from the term "data-binding." "data-binding" is indeed an action: it's populating UI controls with values from the actual data, AKA model, for example when fields in a form get filled with data from a database and get automatically updated, using the Observer pattern as you mentioned. I think the main distinction with binding is one-way versus two-way: in two-way data-binding, user input also gets synchronized back to the model, rather than data only syncing from the model to the view.

"bind" is a verb, and the verb form of "data-binding" would be "bind data" or "perform data-binding." The second example demonstrates that "data-binding" is also a noun, which could be defined as "the act of binding data/model properties to UI/view properties". With respect to the noun version of "binding" by itself, I think you're correct that it usually refers to an individual binding between two properties. To demonstrate this visually, suppose that the dots represent two properties that are bound to each other:

• ----- •

The "binding" here is the line between them.

To get more specific, a one-way binding could be represented with a single arrow:

• ----> •

And a two-way binding with two arrows:

• <---> •

"live binding" is a term that's just used to indicate that the Observer pattern is being used. My guess would be that the desire to distinguish a "live binding" probably came from web developers who had previously worked with frameworks where data-binding happened only once per HTTP request, when the page was first being loaded. Now that Javascript-heavy web apps are becoming the norm (partially thanks to ajax), there's no reason not to use the Observer pattern as suggested by the original definition of MVC, so "live binding" is probably an unnecessary term with regard to RIAs or native desktop or mobile apps.

As an aside, Trygve Reenskaug's original vision of MVC (he invented it) is fundamentally about reflecting the end user's mental model in the system so that the "Model" is something that the user is almost manipulating directly (or at least feels that way to the user). So the Observer pattern (or at least some mechanism to keep Model and View in sync without reloading the page) is essential to it and web development frameworks that have most of the code on the server-side aren't really MVC as originally conceived but rather a variant that follows the same general idea in terms of code organization. Modern Javascript frameworks for primarily client-side apps make real MVC possible for web development.

Back to a point you made in your question, I think you're also correct when you say that a binding isn't necessarily just between a model property and a view property; it could be between two model properties (usually on different models), or between two view properties. But I would disagree with your assertion that "binding" is only a noun with respect to programming - obviously in English it's the noun form of the verb "bind," in other words "the act of binding," and I think that's a valid usage in programming as well. So essentially what I'm saying is that it has a double meaning, but I think the definition you proposed is the most common. Here's my attempt at a formal definition:

Binding.

1. A connection between two properties (usually in two different objects) which keeps the properties in sync with each other, i.e. having the same value. The synchronization can be either unidirectional or bidirectional.
2. The act of initiating such a connection.