Computed Test

components.computed-test.js

import Ember from 'ember';

export default Ember.Component.extend({
  isCheap: Ember.computed.lt('itemMasterPrice', 5),
  listLength: Ember.computed('itemList.[]', function() {
    return this.get('itemList').length;
  }),
  itemPrices: Ember.computed.mapBy('itemList', 'price'),
  mostExpensive: Ember.computed.max('itemPrices'),
  isFeatured: Ember.computed.filter('itemList', function(item) {
    return item.isFeatured;
  }),
  itemMasterPrice: 4,
  itemList: [
    { 
      name: 'parang',
      price: 120,
      isFeatured: true
    },
    { 
      name: 'bolo',
      price: 85,
      isFeatured: false
    },
    { 
      name: 'ginunting',
      price: 230,
      isFeatured: true
    }
  ]

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{computed-test}}
<br>
{{outlet}}
<br>
<br>

templates.components.computed-test.hbs

<dl>
	<dt>isCheap: {{isCheap}}</dt>
  <dd>(single item) watches if price is under 5</dd>

	<dt>listLength: {{listLength}}</dt>
  <dd>watches an arr and returns the length if items are removed or added</dd>

	<dt>mostExpensive: {{mostExpensive}}</dt>
  <dd>watches arr of items and returns the most expensive</dd>

	<dt>isFeatured: 
  	{{#each isFeatured as |item|}}
  		{{item.name}}
  	{{/each}}
  </dt>
  <dd>return an array of products that have isFeatured = true</dd>
</dl>
{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}