app.js

//= require jquery
//= require handlebars
//= require ember
//= require spree

Spree.App = Ember.Application.create()

$.ajaxPrefilter (options, originalOptions, jqXHR) ->
  jqXHR.setRequestHeader('X-Spree-Token', 'fake')

Spree.App.Router.map ->
  this.route('products', { path: '/' })
  this.resource('product', { path: '/product/:slug' });

Spree.App.Product = Ember.Object.extend({});

Spree.App.Product.reopenClass({
  findAll: ->
    return $.getJSON("/api/products.json").then((response) ->
      return response.products.map((product) ->
        return Spree.App.Product.create(product);
      )
    )
})

Spree.App.ProductsRoute = Ember.Route.extend
  model: ->
    return Spree.App.Product.findAll()

Spree.App.ProductRoute = Ember.Route.extend({
  model: (params) ->
    return this.store.find('product', params.slug)
});

template.html

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
  <div id="products" class="row" data-hook>
    rendering...
    {{#each}}
      <div id="product_{{ unbound product.id }}" class="col-md-3 col-sm-6" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
        <div class="panel panel-default">
          <div class="panel-body text-center product-body">
            {{#link-to 'product' this}}
              {{master.name}}
            {{/link-to}}
          </div>
          <div class="panel-footer text-center">
            <span class="price selling lead" itemprop="price">{{ display_price }}</span>
          </div>
        </div>
      </div>
    {{/each}}
  </div>
</script>