javascript 使用vanilla JS观察对象属性更改

Posted 2021-05-04

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