exhtml
2/13/2018 - 8:39 AM

Watch for Object Properties changes with vanilla JS

note: muy nuevo? needs Polyfill for IE, what about performance? https://davidwalsh.name/watch-object-changes https://github.com/sindresorhus/on-change https://www.stefanjudis.com/today-i-learned/the-global-reflect-object-its-use-cases-and-things-to-watch-out-for/

watch-object-changes-js
content_copyfile_download
var onChange = function(object, onChange) {
  var handler = {
    get(target, property, receiver) {
      try {
        return new Proxy(target[property], handler);
      } catch (err) {
        return Reflect.get(target, property, receiver);
      }
    },
    defineProperty(target, property, descriptor) {
      onChange();
      return Reflect.defineProperty(target, property, descriptor);
    },
    deleteProperty(target, property) {
      onChange();
      return Reflect.deleteProperty(target, property);
    }
  };
  return new Proxy(object, handler);
};

var trackingIndexBookingList = {
  filtered: []
};

// watcher
var watchedBookingList = onChange(trackingIndexBookingList, function() {
  console.log('Object changed, triggea el cambio en las vistas: ', trackingIndexBookingList.filtered.length)
});

// LUEGO YA PODEMOS LLAMARLO EN NUESTRO EVENTO, POR EJEMPLO CUANDO FILTREMOS UNA DATATABLE
// (esto revisarlo que seguro que se puede simplificar)
dataTableTrackings.on('draw.dt', function(){
  trackingIndexBookingList.filtered = []; //vaciamos el array
  dataTableTrackings.rows( { filter : 'applied'} ).data().each(function(item, i){
      trackingIndexBookingList.filtered.push(item.IdentificadorClick);
  });
  //triggea el watch
  watchedBookingList.filtered = trackingIndexBookingList.filtered;
});