Logging

##Logging A common problem with observable frameworks like this is that model changes can trigger cascading updates that are hard to follow and debug. To solve this issue, you can switch on logging for d3bind, and it will display the call hierarchy of all the observable changes:

d3bind.logging = true;

The following example shows the cascading updates of the observables logged after inserting an item into an ObservableArray:

ObservableArray:  insert: Object {id: 13, name: "zeqz5r"} | index: 2
  ObservableArrayLength:  4 | oldValue: 3 | caller: undefined
    Selection(text):  4 | oldValue: 3 | caller: undefined | node: <span>4​</span>​
    Selection(property:checked):  false | oldValue: false | caller: undefined | node: <input type=​"checkbox">​
  ObservableMap:  insert: false | key: 13
    ObservableMapSize:  4 | oldValue: 3 | caller: undefined
  Selection(repeat):  insert: Object {id: 13, name: "zeqz5r"} | index: 2 | node: <li>​…​</li>​

This example comes from a "todo list" application, where the number of items and the number of selected items are displayed on the page. The insert event of the array first triggers a change in the array's length from 3 to 4, and then this triggers two more changes in the DOM, where d3 selections were bound to the array's length, for example with .bindText(array.$length). Then the insert event triggers changes in an ObservableMap, that was created with ObservableMap.bindTo(array, item => item.id, () => false) to store which items are selected. Finally, a new DOM element is inserted into the repeater bound to the array with .bindRepeat(array, ...).

The log messages typically​ display the new value and the previous value of the observable or selection, and an optional caller parameter that can be passed to any observable on its setter methods.