computed-properties

components.cheap-socks.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.featured-items.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  cheapSocks: 4,
  hasChaapSocks: Ember.computed.lt('cheapSocks', 5),
  
  
  priceMap: Ember.computed.mapBy('model', 'price'),
  biggestNumber: Ember.computed.max('priceMap'),
  mostExpensive: Ember.computed.filter('model', function(model, index, array) {
    const exp = this.get('biggestNumber');
    return model.price >= exp
  }),
  
  isCheap: Ember.computed('model.@each.price', function() {
    let model = this.get('model');
    return model.filter((item) => {
    	return item.price < 5
    });
  }),
  
  
  
  
  
 
  
  
  isFeatured: Ember.computed.filterBy('model', 'isFeatured', true),
  
  itemSorting: ['item:asc'],
  sortedItemAsc: Ember.computed.sort('model', 'itemSorting'),
  
  isCheapKey: ['isCheap:desc'],
  isCheap: Ember.computed.sort('model', 'isCheapKey')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return [
      { id: 1, item: 'Pants', price: 9.99, isFeatured: false, isCheap: false },
      { id: 2, item: 'Shirt', price: 6.99, isFeatured: false, isCheap: false },
      { id: 3, item: 'Belt', price: 4.99, isFeatured: false, isCheap: true },
      { id: 4, item: 'Socks', price: 5.99, isFeatured: false, isCheap: true },
      { id: 5, item: 'Underwear', price: 10.99, isFeatured: true, isCheap: false }
    ]
  }
});

templates.application.hbs

<p>You have <strong>{{model.length}}</strong> items in your cart</p>

<p>Todays featured items are {{featured-items featured=isFeatured}}</p>

{{log isCheap}}

<strong>{{mostExpensive.item}}</strong> are our most expensive item at $<strong>{{mostExpensive.price}}</strong>

<h3>ASC</h3>
{{#each sortedItemAsc as |i|}}
	<li>{{i.item}}</li>
{{/each}}

<h3>DESC</h3>
{{#each isCheap as |i|}}
	<li>{{i.item}} - {{i.isCheap}}</li>
{{/each}}

<h3>Cheap Pizza</h3>
Does the pizza shop have pizza cheaper than $5 dollars ? {{#if under5}} yes the pizza is ${{pizza}}{{else}}no the pizza is ${{pizza}}{{/if}}

<h3>Most Expensice</h3>
<div>
{{#each mostExpensive as |x|}}
	{{x.item}}-{{x.price}}
{{/each}}
</div>
{{outlet}}


{{#if hasChaapSocks}}
	Socks are cheap now only ${{cheapSocks}}
{{else}}
	Currently socks are out of my price range.
{{/if}}


{{log mostExpensive}}

templates.components.cheap-socks.hbs

{{yield}}

templates.components.featured-items.hbs

{{yield}}
{{#each featured as |feature|}}
	<li>{{feature.item}}</li>
{{/each}}

twiddle.json

{
  "version": "0.13.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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}