Solution

There were three exercises in the last drip that involved using methods on the Ember.computed namespace.

Yesterday we looked at a few methods in the computed namespace in Ember. Today let's put s few of those (any maybe a few others) to use. This will be easiest to complete using Ember Twiddle .

Step 1

Given this component: 

export default Ember.Component.extend({
  name: 'David Ross',
  position: 'Catcher'
});

You were tasked with adding a computed property that returns name and position in an array. We can accomplish this using collect and passing in the keys to collect: 

export default Ember.Component.extend({
  name: 'David Ross',
  position: 'Catcher',
  deets: Ember.computed.collect('name', 'position')
});

Step 2

The second like the first only requires use of a single line: 

emptyProp: [],
isItEmpty: Ember.computed.empty('emptyProp')

Step 3

The third exercise was a little more involved but still pretty straight forward: Given this array: ['Jim', 'Josh', 'Brandon', 'Sarah', 'Jack', 'Kristen', 'Adam'] , create an input in the template, and a computed property in the controller that filters those values by the value of the input. 

names: ['Jim', 'Josh', 'Brandon', 'Sarah',  'Jack', 'Kristen', 'Adam'],
filteredNames: Ember.computed('nameInput', 'names', function(){
  let nameSearch = this.get('nameInput');
  let names = this.get('names');
  return names.filter(name => name.indexOf(nameSearch) > -1);
})
{{input value=nameInput}}
<br>
{{#each filteredNames as |name|}}
  {{name}}
{{/each}}

This week we are going to look at Utilities, Helpers, and a bit more miscellaneous templating items. Here is some reading to get you on your way:

Links