Pass readonly / copy of a property to a component


#1

I have a avatar component which accepts avatar url and also supports new avatar upload. I also observe the url property to reflect any changes. The url for avatar comes from user model. Now if I update url property inside component (eg: data uri of cropped image) attribute of model is also updating with the value. I want to pass copy of the property to component so that I can safely use the same url to store temporary states.

{{#avatar url=model.avatar canedit=true}}
{{/avatar}}

#2
Ember.Component.extend({
  _url: Ember.computed.oneWay('attrs.url')
});

Now inside of your component, use _url. Eventually, attr mutability will be an opt-in by default but for now this is the state we live in.


#3

You could probably also do this by making a helper. That might make your life easier when angle-brackets land and are one-way by default. For example:

// app/helpers/one-way.js
import Ember from 'ember';

export default Ember.Helper.helper(function([value], hash) {
  return value;
});

Then you could use it like so:

{{#x-avatar url=(one-way model.avatar) canedit=true}}
{{/x-avatar}}

If you took this approach, it would due double duty in that it would easily serve as a “decorate” or which components expect one-way. That way when it does come time to toggle to one-way, you just remove them all and you’re good to go. Just a thought.


#4

@workmanw That helper already exists and is built in. It is readonly.

{{#x-avatar url=(readonly model.avatar) canedit=true}}
{{/x-avatar}}

#5

Thanks @jasonmit @workmanw @Gaurav0