bindify

Bindify-JS
git clone http://git.code.weiherhei.de/bindify.git
Log | Files | Refs | README

app.js (1242B)

      1 
      2 // Some sample data.
      3 let data = {
      4     overview: 'My first bindify data-binding example',
      5     theme: {class: 'theme-silver'},
      6     names: [ 'John','Arnold' ],
      7     person: { name: 'Arnold Schwarzenegger', fullname: function () {return "Mr./Mrs. "+data.person.name; } },
      8 };
      9 
     10 // our own updater for informing the binding about data changes.
     11 let updater = $.Callbacks();
     12 
     13 $('html').bindify( data,
     14     {   debug: true,
     15         prefix: 'bind',
     16         updateModel:true,
     17         updateDOM:true,
     18         updateEvent: 'input',
     19         onUpdate: function(d) {
     20             console.log("The data has changed.");
     21             console.log("New name in callback data: "+d.person.name);    // the callback is sending the new data object
     22             console.log("New name in data object  : "+data.person.name); // Our data object has changed too
     23         },
     24         updateCallback: updater
     25     } );
     26 
     27 
     28 // Now we want to do some changes to the data model.
     29 setTimeout( function() {
     30 
     31     // Ok, now we are changing the data model.
     32     data.person.name = "Sarah Connor";
     33     data.names.push("Sarah");
     34     // for now, nothing else is happening. The DOM stays in its state.
     35     // to update the binding we have to inform the data binding:
     36     updater.fire();
     37 
     38 },1000 );