diff --git a/src/Ractive/prototype/observe/Array.ts b/src/Ractive/prototype/observe/Array.ts index e0c9b79ff0..4c4050a900 100755 --- a/src/Ractive/prototype/observe/Array.ts +++ b/src/Ractive/prototype/observe/Array.ts @@ -53,7 +53,7 @@ export default class ArrayObserver { dispatch(): void { try { - this.callback(this.pending); + this.callback.call(this.ractive, this.pending); } catch (err) { warnIfDebug( `Failed to execute array observer callback for '${this.keypath}': ${err.message || err}` diff --git a/tests/browser/methods/observe.js b/tests/browser/methods/observe.js index 5ebbc282d3..de650a734f 100644 --- a/tests/browser/methods/observe.js +++ b/tests/browser/methods/observe.js @@ -1805,6 +1805,29 @@ export default function() { r.push('list', 1); }); + test('array observers callback must have ractive instance as this (#3343)', t => { + t.expect(2); + let thisInsideObserveInitProperty; + + const r = new Ractive({ + data: { list: [] }, + observe: { + list: { + handler() { + thisInsideObserveInitProperty = this; + }, + array: true + } + } + }); + + r.observe('list', function() { + t.equal(this, r); + }); + + t.equal(r, thisInsideObserveInitProperty); + }); + test(`plain observers allow a hook to set the 'old' value`, t => { t.expect(4);