ember-changeset 1.4.2

Introducing nested keys support

Jason Tu
The Ember Way
3 min readJan 6, 2018

--

Thanks to the work of many contributors, ember-changeset now supports nested keys! This has been ember-changeset's most requested feature, and what follows is an example of usage.

Usage

While previously you had to construct additional changesets for sub-objects within your model object, you can now let Changeset handle that for you:

It also works the way you’d expect when fetching Objects. However, note that you should use Changeset#get instead of Ember.get:

This is because Changeset returns Ember.ObjectProxy instances when the underlying property is an Object, and overrides Ember.Object.get to hide this implementation detail.

How it works

In her original blog post on ember-changeset, Lauren explains how Changeset relies on the unknownProperty and setUnknownProperty methods to implement Changeset's behavior. While that implementation works for Object keys that are at most one level deep (like "firstName" or "lastName"), it doesn’t work for nested keys like "address.zipCode".

To illustrate, try this out in Ember Twiddle:

unknownProperty receives "foo" for key, not "foo.bar.baz" as you would expect.

Inspired by a presentation by Jamie White, we work around this Ember.Object quirk by keeping an internal cache of “relays”. A Relay implements unknownProperty, and holds a key prefix as well as a reference to the original Changeset. Upon calling .get() on a Relay, it will delegate — or “relay” — requests to the original Changeset, and prefix its key to the request:

While clever, relays are somewhat of a hack. Lauren’s latest library, validated-proxy, experiments with solving this problem using ES2015 proxies instead.

Ember Data relationships

Since belongsTo relationships are sub-objects, we expect Changeset to work with belongsTo relationships. There is currently no support for arrays and hasMany relationships, however that is in the works!

We’re aware of libraries such as ember-orbit that provide Changeset-like “forking” for an entire store. With support for hasMany relationships, ember-changeset can fill a similar need without having to swap out Ember Data.

Static typing

Static typing is invaluable for clarifying and documenting APIs, so ember-changeset@1.4.2 adds Flow comment types for all its API properties and methods. While you could set up Flow and consume these types in your Ember app, we intend Flow to be a stopgap solution for static typing until Chris Krycho recommends ember-cli-typescript for addon use.

New logo

Finally, you might notice that ember-changeset and its family of plugins sports a new logo. 🙂

That’s it for now! Please feel free to open an issue if you encounter any bugs or problems.

--

--