December 12, 2019
Native Data-binding using JavaScript with observe
We have always loved using MV* frameworks for data-binding. Well, we have our reasons. There was never an easy way to set event listeners on RAW objects and perform certain tasks. Thanks to the recent ECMASCRIPT’s (7.0) proposal, data-binding has never been so easy and best of all, without any help from any framework.
Announcing Object/Array.observe
Allow me to introduce you to
a method that asynchronously keeps track of the changes to the data model or
simply an array which allows you to perform certain tasks by providing a callback function every time it detects a change in your data model.
This callback function returns an object that provides the following information.
- type of change(add, update, delete) and splice if you are calling observe on an array
- name of the property changed
- changed object
- and the old value of the changed property
Why are we going gaga over data-binding? Well, data-binding is important if you care about keeping the content, presentation and behavior separate. HTML is perfect for declaring static documents and therefore, we need a way to tie our document and data together. With data-binding, we achieve just that. Using Object/Array.observe, we observe the changes in our data model and keep the DOM upto date.
Without further ado, let me show you how easy it is.
Note: Following example uses handlebars (which depends on jQuery) to save me from writing unnecessary DOM manipulation code.
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset=“utf-8“> |
| | <title>Data-binding with object.observe</title> |
| | </head> |
| | <body> |
| | |
| | <script src=“//code.jquery.com/jquery-1.9.1.min.js“></script> |
| | <script src=“//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js“></script> |
| | <script id=“handlebars-template“ type=“text/x-handlebars-template“> |
| | <div id=“output“> |
| | <h1>{{name}}</h1> |
| | <h2>{{yearsRocking}}</h2> |
| | <div>{{occupation}}</div> |
| | </div> |
| | </script> |
| | <script> |
| | var source = $(“#handlebars-template“).html(); |
| | var template = Handlebars.compile(source); |
| | |
| | // Our data model |
| | var DataModel = { |
| | yearsRocking: 0, |
| | name: “Robert Plant“, |
| | occupation: “Rocking“ |
| | }; |
| | |
| | // takes the compiled output and dumps it onto the body |
| | function updateDOM() { |
| | var html = template(DataModel); |
| | $(‘body‘).html(html); |
| | } |
| | |
| | // init |
| | // dumping the compiled output from handlebars template onto the body |
| | updateDOM(); |
| | |
| | // Observing changes on the data model |
| | // Checking if id value has been changed |
| | // and if yes, updating the DOM |
| | Object.observe(DataModel, function(changes) { |
| | changes.forEach(function(change) { |
| | if(change.name === ‘yearsRocking‘) { |
| | updateDOM(); |
| | console.log(change); |
| | } |
| | }); |
| | }); |
| | |
| | // Simplest way to make changes to the data model |
| | setInterval(function(){ |
| | DataModel.yearsRocking += 1; |
| | }, 1000); |
| | |
| | </script> |
| | </body> |
| | </html> |
view rawdata-binding-with-object.observe.html hosted with ❤ by GitHub