Services - Shopping Cart

components.cart-contents.js

import Ember from 'ember';

export default Ember.Component.extend({  
 	// Here is where the injection of the service happens.
 	// Ember.inject.service takes an argument that is the name of the
  // file of the service that you created.
  // If your variable name matches the service name, you would not
  // need to add the argument at all.
  // For example: shopping-cart: Ember.inject.service()
  cart: Ember.inject.service('shopping-cart'),
  newItem: '',   
  actions: {
    add() {
      this.get('cart').add(this.get('newItem'));
      this.set('newItem', '');
    },
  	remove(item) {      
   	 var store = this.get('store');
     this.get('cart').remove(item); 
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('cart');
});

export default Router;

routes.cart.js

import Ember from 'ember';

export default Ember.Route.extend({
  // The great thing about services is that they can be injected
  // anywhere - including here in the route.
  // The route is the source of data for the shopping cart, so 
  // it makes sense to inject a service here to handle
  // shopping cart data.
  // The model is being populated with the "items" property
  // of the service.
  cart: Ember.inject.service('shopping-cart'),
  model() {
  	return this.get('cart').get('items')
  }
});

services.shopping-cart.js

import Ember from 'ember';

// The service itself is simply a collection of 
// properties and methods that are reusable throughout
// your application.
// Each service is a singleton so it maintains state.
// This makes it perfect for getting references to data
// that must be used in multiple places... like session tokens.

export default Ember.Service.extend({
  items: null,
  
  init() {
  	this._super(...arguments);
    this.set('items', []);
  },
  
  add(item) {
   this.get('items').pushObject(item); 
  },
  
  remove(item) {   
   this.get('items').removeObject(item); 
  },
  
  empty() {
  	this.get('items').setObjects([]);
  }
  
  
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul {
	padding: 0;
  list-style-type: none;
}
li {
 padding: 10px 0; 
}

templates.application.hbs

<h1>{{appName}}</h1>

{{outlet}}


<p>
Ember Services are singletons that can be used to store persistent data and/or operations that can be performed.
</p>

<p>
These can then be injected into other parts of your application for reuse.
</p>

<h4>Get Started:</h4>
<p>visit the '/cart' url</p>

<p>The component js file - components/cart.js - implements the injection.</p>

<p>Poke around in there and take a look at the 'services/shopping-cart.js' file to see what the actual service looks like.</p>

<p>The 'routes/cart.js' file shows how we can use services to populate our model data too.</p>

<p>Take a look at '/templates/cart.hbs' to see how the cart component is instantiated and how it's getting the model data.</p>

templates.cart.hbs

<h3>Shopping Cart</h3>

{{!-- 
// The route automatically passes the model data to the template.
// Here we just need to set the 'model' attribute of the component 
// to be this same model data that is passed down from the route.
// This makes it usable inside the component itself.
// 
// Any attributes can be dynamically passed into a component just like this!
--}}

{{cart-contents
	model=model
}}

templates.components.cart-contents.hbs

{{yield}}

{{input value=newItem}} <button class="btn btn-default" {{action 'add'}}>Add</button>

<ul>
  {{#each model as |item|}}
    <li>
    	{{item}}
      <button class="btn btn-danger" {{action "remove" item}}>Remove</button>
    </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.10.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.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0",
    "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
  },
  "addons": {}
}