Class ArrayProxy

public
Extends: EmberObject
Uses: MutableArray
Defined in: packages/@ember/-internals/runtime/lib/system/array_proxy.js:43
Module: @ember/array 
import ArrayProxy from '@ember/array/proxy';

An ArrayProxy wraps any other object that implements Array and/or MutableArray, forwarding all requests. This makes it very useful for a number of binding use cases or other cases where being able to swap out the underlying array is useful.

A simple example of usage:

import { A } from '@ember/array';
import ArrayProxy from '@ember/array/proxy';

let pets = ['dog', 'cat', 'fish'];
let ap = ArrayProxy.create({ content: A(pets) });

ap.get('firstObject');                        // 'dog'
ap.set('content', ['amoeba', 'paramecium']);
ap.get('firstObject');                        // 'amoeba'

This class can also be useful as a layer to transform the contents of an array, as they are accessed. This can be done by overriding objectAtContent:

import { A } from '@ember/array';
import ArrayProxy from '@ember/array/proxy';

let pets = ['dog', 'cat', 'fish'];
let ap = ArrayProxy.create({
    content: A(pets),
    objectAtContent: function(idx) {
        return this.get('content').objectAt(idx).toUpperCase();
    }
});

ap.get('firstObject'); // . 'DOG'

When overriding this class, it is important to place the call to _super after setting content so the internal observers have a chance to fire properly:

import { A } from '@ember/array';
import ArrayProxy from '@ember/array/proxy';

export default ArrayProxy.extend({
  init() {
    this.set('content', A(['dog', 'cat', 'fish']));
    this._super(...arguments);
  }
});

Show: