Ember Data Example

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.prod.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.4/ember-data.prod.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
      <li>Should display spinner? {{basketPriceProxy.isPending}}</li>
      <li>Sum: {{basketPriceProxy.content}}</li>
      <li>Bare proxy: {{basketPriceProxy}}</li>
    </ul>
  </script>

CSS

/* Put your CSS here */
 html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();
const {computed, RSVP} = Ember;
const {PromiseObject} = DS;

App.Router.map(function () {
    // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    setupController(controller) {
        this._super(...arguments);
    		const Basket = Ember.Object.extend({
        	price: computed('boxes.@each.price', function() {
          	  const promise = this.get('boxes').then(boxes => {
                const prices = boxes.map(box => box.get('price'));

                return RSVP
                  .all(prices)
                  .then(prices => prices.reduce((carry, price) => carry + price, 0));
              });
            return PromiseObject.create({promise});
          })
        });
        
        const Box = Ember.Object.extend({
        	  price: computed('products.@each.price', function() {
          	  const promise = this.get('products').then(products => {
                const prices = products.map(product => product.get('price'));

                return RSVP
                  .all(prices)
                  .then(prices => prices.reduce((carry, price) => carry + price, 0));
              });
            return PromiseObject.create({promise});
          })
        });
        
        const Product = Ember.Object.extend({
        	price: 6
        });
                
        const productsPromise = new RSVP.Promise(resolve => {
        	setTimeout(function() {
          	resolve([Product.create(), Product.create()]);
          }, 4000);
        });
        
        const boxesPromise = new RSVP.Promise(resolve => {
        	setTimeout(function() {
          	resolve([Box.create({
              products: productsPromise
            })]);
          }, 2000);
        });
    
        const basket = Basket.create({
          boxes: boxesPromise
        });
        
        controller.setProperties({
        	basketPriceProxy: basket.get('price'),
        });
    }
});