Use Transforms to Tweak Data
If you’re using Ember Data to access a legacy API, or even to use data from an upstream data source, you may need to perform some transformation on a data value before using it in your app. For this use case, Ember Data includes the DS.Transform class. A DS.Transform encapsulates the logic needed to take data from one form into the desired form.
Ember Data comes with a few built-in DS.Transform implementations: DS.BooleanTransform, DS.DateTransform, and DS.NumberTransform. Each of these is responsible for taking data from a non-canonical form and translating it into the expected form. For example, DS.BooleanTransform is able to take raw JSON with a value of "true" or 1 and transform it into a Boolean true.
Let’s see how this could work for another transformation. Imagine a use case where your app accessed financial transaction data that originated from an upstream data source. Complicating matters is the fact that these transactions are stored in US dollars. The app wants to display all such data points in the user’s native currency. A DS.Transform can help.
To get started, you execute the following Ember CLI command:
| | $ ember generate transform native-currency |
This command generates an empty transform stub. The following example illustrates how the transform would be built:
| | import DS from 'ember-data'; |
| | |
| | export default DS.Transform.extend({ |
| | deserialize: function(serialized) { |
| | |
| | // Perform your currency translation here |
| | var amountInNative = |
| | this.currencyTranslator.translateToNative(serialized); |
| | return amountInNative; |
| | }, |
| | |
| | serialize: function(deserialized) { |
| | |
| | // Translate from native to USD |
| | var amountInUSD = this.currencyTranslator.translateToUSD(deserialized); |
| | return amountInUSD; |
| | } |
| | }); |
In this example, we assume that a user-specific translation object has been created and injected into the transform. This will allow us to compute translations that use the user’s currency translation rate. The transform itself is simply responsible for stepping in when a model requests information in the native currency. An example model class that needs to use the transform would look like this:
| | import DS from "ember-data"; |
| | |
| | export default DS.Model.extend({ |
| | toAccount: DS.attr('string'), |
| | fromAccount: DS.attr('string'), |
| | amount: DS.attr('native-currency') // Amount in native currency |
| | }); |
The same data could be represented without using the transform like this:
| | import DS from "ember-data"; |
| | |
| | export default DS.Model.extend({ |
| | toAccount: DS.attr('string'), |
| | fromAccount: DS.attr('string'), |
| | amount: DS.attr('number') // Amount in USD as kept in the data store |
| | }); |
The transform works both to deserialize the data (that is, translate from its stored format to its displayed format), and to serialize the data. This means that you can display in your chosen format, but when it’s time to save, the serialize function steps in and converts the data back into the appropriate format, to remain consistent with the database’s expectations.