shops and products / basic example

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Shops to shop'
});

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('shops', { path: '/' }, function() {
    this.route('shop-list', { path: '/' });
    this.route('shop-detail', { path: ':shop_id' });
  });
});

export default Router;

routes.shops.js

import Ember from 'ember';

var tempShopData = [
  {
    id: 1,
    name: 'Mystery barn',
    products: [
      'Mysterious glasses',
      'Mysterious eyebrows (2 sets)',
    ],
  },
  {
    id: 2,
    name: 'Body shop',
    products: [
      'Left arm',
      'Pair of feet',
      'Ring finger',
    ],
  },
  {
    id: 3,
    name: 'Illness central',
    products: [
      'Snot (2oz)',
      'Flu virus',
      'Coughs (20 pack)',
    ],
  },
];


export default Ember.Route.extend({
  
  model() {
    // takes data and assigns it 
    // to the 'model' attribute on the associated controller
    return tempShopData;
  },
  
});

routes.shops.shop-detail.js

import Ember from 'ember';

export default Ember.Route.extend({

  // model(incomingParameters) {
    // return this.store.peekRecord('shop', incomingParameters.id);
  // },

});

routes.shops.shop-list.js

import Ember from 'ember';

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

templates.application.hbs

<h1>{{appName}}</h1>
<br>
<br>
{{outlet}}

templates.shops.hbs

{{link-to 'shops' 'application'}}

{{outlet}}

templates.shops.shop-detail.hbs

<h2>{{model.name}}</h2>

<ul class='product-list'>
  {{#each model.products as |product|}}
    <li class="product">
      {{product}}
    </li>
  {{/each}}
</ul>

templates.shops.shop-list.hbs

<ul class='shop-list'>
  {{#each model as |shop|}}
    <li class="shop">
			{{#link-to 'shops.shop-detail' shop}}
        <span>{{shop.name}}</span>
      {{/link-to}}
    </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.13.0",
  "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"
  }
}