Array observer callbacks have wrong this

[marcalexiei]

Description:

During #3334 I noticed that the this set inside array observer callbacks doesn't match the doc.

It seems that this of ObserverArrayCallback should be set to Ractive. See Ractive.d.ts

The problem is inside ArrayObserver which invoke callback without changing the this:
this.callback(this.pending);

To fix the issue I would do something like this:
this.callback.call(this.ractive, this.pending);
however this could result in a breaking change so I would suggest to release change alongside typescript refactor version.

Versions affected:

1.3.x

Platforms affected:

All

Reproduction:

Open this fiddle and check the console:

• observe function – ArrayObserver
• observe arrow – Ractive
• observe as prop – ArrayObserver

const r = window.r = new Ractive({
  el: '#main',
  template: '#template',
  data: {
    array: []
  },
  oninit() {
    this.observe('array', function () {
      console.info('observe function', this);
    }, { array: true });

    this.observe('array', () => {
      console.info('observe arrow', this);
    }, { array: true });
  },

  observe: {
    array: {
      handler() {
        console.info('observe as prop', this);
      },
      array: true,
    }
  }
});

[evs-chris]

Arguably, this is a bug, so it wouldn't be a breaking change. I do have a few bugfixes queued in master, but I've been trying to make as few changes as possible to avoid making uncomfortable diffs here. If it's not bothering anyone, I'm fine with either fixing it now or in the ts branch.

[marcalexiei]

Ok, I'll apply the patch now otherwise I get type error due the typing of ObserverArrayCallback :D