In the last drip we were tasked with converting a few simple observers into computed properties. Let's look at how we can accomplish that.

The first observer looked like this:

formHasUpload:'upload', function() {
  if(Ember.isPresent(this.get('upload'))) {
    this.set('needsUpload', false);

This is a fairly straight forward port. As we can see, we are watching the upload property and if it exists, we are setting a property called needsUpload to false. We can assume that needsUpload defaults to true. To get this work without an observer, all we need to do is change needsUpload to be a computed property.

needsUpload: Ember.computed('upload', function(){
  return Ember.isBlank(this.get('upload'));

The second example is essentially the same as the first.

resetOnSave:'resetChecks', function() {
  let reset = this.get('resetChecks');
    this.set('isSelected', false);

It observes the resetChecks property and if it is truthy, it sets isSelected to false. Again, all we really need to do is change isSelected to be a computed property that has resetChecks as its key.

isSelected: Ember.computed('resetChecks', function(){
  return !this.get('resetChecks');

These examples were obviously pretty simple, but they were embarrassingly similar to real life observers that I have uncovered in the wild. In most cases, if you find an observer, even a more complicated one, you can generally untangle it to take advantage of Ember's lifecycle hooks and computed properties.


This week we are going to look at some more devops part of the Ember process, namely, fastboot and simple process for deploying your app. Here are some links that will give you a head start in that direction.