Advanced binding handlers

So far, we've been looking at binding handlers that handle one or two properties and result in a fairly simple single-purpose control. In the previous example, we started looking at binding handlers that created new child elements, and this technique allows us to create much more complex binding behaviors. Bindings can also interact with complex elements such as charts or map controls (for example, a Google Maps widget), providing a clean API that the viewmodel can interact with.

Binding complex data with charts

The first time we looked at integrating with a third-party control was with a single-property two-way binding to a datepicker. Any time we are working with third-party UI tools, the goal is to abstract them away from the view and the viewmodel through bindings; even when those tools are for complex structures such as charts.

Charts.js (http://www.chartjs.org) is a popular JavaScript library built to display data in, you guessed it right, graphical charts...