Class ObjectProxy

public
Extends: EmberObject
Uses: Ember.ProxyMixin
Defined in: packages/@ember/-internals/runtime/lib/system/object_proxy.js:4
Module: @ember/object 
import ObjectProxy from '@ember/object/proxy';

ObjectProxy forwards all properties not defined by the proxy itself to a proxied content object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import EmberObject from '@ember/object';
import ObjectProxy from '@ember/object/proxy';

let exampleObject = EmberObject.create({
  name: 'Foo'
});

let exampleProxy = ObjectProxy.create({
  content: exampleObject
});

// Access and change existing properties
exampleProxy.get('name');          // 'Foo'
exampleProxy.set('name', 'Bar');
exampleObject.get('name');         // 'Bar'

// Create new 'description' property on `exampleObject`
exampleProxy.set('description', 'Foo is a whizboo baz');
exampleObject.get('description');  // 'Foo is a whizboo baz'

While content is unset, setting a property to be delegated will throw an Error.

1
2
3
4
5
6
7
8
9
10

import ObjectProxy from '@ember/object/proxy';

let exampleProxy = ObjectProxy.create({
  content: null,
  flag: null
});
exampleProxy.set('flag', true);
exampleProxy.get('flag');         // true
exampleProxy.get('foo');          // undefined
exampleProxy.set('foo', 'data');  // throws Error

Delegated properties can be bound to and will change when content is updated.

Computed properties on the proxy itself can depend on delegated properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { computed } from '@ember/object';
import ObjectProxy from '@ember/object/proxy';

ProxyWithComputedProperty = ObjectProxy.extend({
  fullName: computed('firstName', 'lastName', function() {
    var firstName = this.get('firstName'),
        lastName = this.get('lastName');
    if (firstName && lastName) {
      return firstName + ' ' + lastName;
    }
    return firstName || lastName;
  })
});

let exampleProxy = ProxyWithComputedProperty.create();

exampleProxy.get('fullName');  // undefined
exampleProxy.set('content', {
  firstName: 'Tom', lastName: 'Dale'
}); // triggers property change for fullName on proxy

exampleProxy.get('fullName');  // 'Tom Dale'

Show: