File example/app.js

Last commit: Tue Jan 28 17:09:57 2020 +0100	Jan Dankert	Adding an example.


     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 );



Download example/app.js


History
Tue, 28 Jan 2020 17:09:57 +0100	Jan Dankert	Adding an example.