Question

Hello StackOverflow experts,

I would like to know if it would be possible to use Ember.js’ computed properties to modify the value of the property before returning to whatever object requests it.

Imagine this simple example:
I have a User object with mail property
When I set the property, I want the email address to change from [e-mail] to [e-mail], then return it

When I request the property ( via User.get ) I want to get the modified property back.

I think it should be pretty simple by utilising another ‘helper’ property, like formatted_mail, where I would store and retrieve the formatted value, but I wonder if something like this can be done without additional model properties.

So far, I have this coffescript code, but I always get ‘undefined’ when reading the property, even though I set it before, so I suspect the value does not get saved by Ember anywhere:

mail: ( ( key, value ) ->
    if arguments.length == 1
        return this.get 'mail'
    else
        return value.split( '@' )[0] + '@anotherexample.com'
).property 'mail'

Thank you for your assistance!

Answer 1

You are close to solution.

As computed properties are always cached by default in Ember (you could disable this behaviour using .volatile()), you do not have to specify what to do when arguments.length is 1, except if you want to specify a default value.

So here it should looks like:

App.User = Ember.Object.extend({
  mail: function(key, value) {
    if (arguments.length === 2) {
      return value.split('@')[0] + "@tieto.com";
    }
    return null;
  }.property()
});

The return null just specify the default value.

When you set the mail property, it will cache the returned value and always returns it without recomputing this property.

Note that you can do that only because the mail property does not depend on other properties. If you were declaring it with .property('anotherProperty'), the mail property will be recomputed any time anoterProperty changes. So in the example above it will reset it to null.

You can try it in this JSFiddle.