two-way binding

In a talk by Dan Hollenbeck last night at The JavaScript Austin Meetup Group on "Three Backbone.Marionette/Node.js Apps: Useful Patterns and Lessons Learned," Mr. Hollenbeck defined two-way binding as the choice between Data Events and UI Events. In a Backbone app a pattern using UI Events would look like so:

       DOM                         View                        Model
-----------------            ----------------            -----------------
|               |            |              |            |               |
|               |  UI Event  |              |  Set/Save  |               |
|     click--------------------->function------------------->attribute   |
|               |            |     |        |            |               |
|               |            |     |        |            |               |
|               |            |     V        |            |               |
|          <---------------------function   |            |               |
|               |   Update   |              |            |               |
|               |            |              |            |               |
-----------------            ----------------            -----------------

 
 

This comes with some assumptions. There is a fire and forget approach to the data layer and a lack of an ability to support asynchronous feedback. If one wants to verify a transaction through a roundtrip across a web socket and back (while using Node.js or IIS8) then one will need to be able to support asynchronous replies. I can see how this would come into play in the name of ensuring that one was not adding a duplicate record and forking reactive behavior based upon if one was or was not. Beyond the data layer challenge one could just want to trigger an event to listen to for feedback to the DOM to address ambiguity as to whether or not the ultimate DOM element to manipulate already exists or is out of scope. In a scenario in which an event to subscribe to is needed after an act has occurred there is a Data Events pattern to use:

       DOM                         View                        Model
-----------------            ----------------            -----------------
|               |            |              |            |               |
|               |  UI Event  |              |  Set/Save  |               |
|     click--------------------->function------------------->attribute   |
|               |            |              |            |       |       |
|               |            |              |            |       |       |
|               |            |              |            |       V       |
|          <---------------------function<---------------------event     |
|               |   Update   |              | Data Event |               |
|               |            |              |            |               |
-----------------            ----------------            -----------------