#102 Computed Macro

Update: I made some corrections based on comments.

Let’s say you want to create a computed property to upper case another property, for example:

first: '',
upperFirst: Ember.computed('first', function(){
  return this.get('first').toUpperCase();
})

first: '',

upperFirst: Ember.computed('first', function(){

return this.get('first').toUpperCase();

})

Let’s say you want to use this “upper” function in multiple places, you can convert it into a “computed macro”.

Create a macro in a subfolder e.g. utils or macros:

app/macros/upper.js

1	app/macros/upper.js

Create the helper:

import Ember from 'ember';

const { get,computed } = Ember;

export default function (key) {
  return computed(key, function(){
    let value = get(this,key);
    return value.toUpperCase();
  });
}

import Ember from 'ember';

const { get,computed } = Ember;

export default function (key) {

return computed(key, function(){

let value = get(this,key);

return value.toUpperCase();

});

}

Now, you can use that computed macro like this:

upperFirst: upper('first'),

1	upperFirst: upper('first'),

Don’t forget to import it:

import upper  from '../macros/upper';

1	import upper from '../macros/upper';

This tip was inspired by the ember-awesome-macros addon.

Also published on Medium.

#102 Computed Macro

Published by

Emad Ibrahim