Observe for array changes in integration with jExcel

Help Requests
1

So we are using Aurelia and considering to create a custom element wrapper of jExcel (https://github.com/paulhodel/jexcel). In jExcel you can define a data-array that will render as a spreadsheet. We want to build a custom element that wraps this, like this:

<jexcel data.bind="data"></jexcel>

where data is defined like so:

data = [{ p1: "v1", p2: "v2"}, { p1: "v3", p2: "v4" }];

And jExcel itself is initialized like so:

jexcel(this.divElement, { 
  data: this.data,
  columns: // description of p1 and p2
});

What we want now is that if the user of the custom element changes the content of the data-array (add, remove entry or change properties of existing) then the data in jExcel is also updated. Vice-versa, if the data is changed using the UI of jExcel, the data-array-binding is updated as well.

As I see it this can be achieved using the BindingEngine (observe array and each property of each object in the array), and using “data-changed”-events of jExcel for the opposite way.

But I would like to ask if any of you have any alternatives to the above? Especially observing the array and each property of each object can quickly become complex as I see it.

1 Like
2

There was a similar request from another community member here Forms-heavy application with auto-save

And there is this plugin to help achieve that https://github.com/bigopon/aurelia-deep-computed

For your case, it would look like this

import { deepComputedFrom } from 'aurelia-deep-comnputed';

@inject(BindingEngine)
export MyExcelEl {

  @bindable data;

  constructor(be) {
    this.bindingEngine = be;
  }

  bind() {
    this.bindingEngine.propertyObserver(this, 'excelData').subsribe(newData => {
      this.jexcel_instance.update(newData);
    });
  }

  @deepComputedFrom('data')
  get exelData() {
    return this.data.map(() => {})
  }
}
3

Thanks! It crossed my mind, that I could use your plugin, but was missing the last bit with how to actually observe. I’ll give it a try :slight_smile:

1 Like