toranb · January 5, 2017 20:34 · Aug 17, 2016 · Aug 17, 2016 · Aug 17, 2016
diff --git a/items.detail.route.js b/items.detail.route.js
@@ -1,15 +1,25 @@
 import Ember from 'ember';
+import route from 'ember-redux/route';
 
-export default Ember.Route.extend({
-    renderTemplate: function(model, options){;
+var model = (dispatch, options) => {
+    //why mirage no work here?
+    var response = {id: options.index, number: options.index};
+    return dispatch({type: 'TRANSFORM_DETAIL', response: response});
+};
+
+
+var DetailRoute = Ember.Route.extend({
+    renderTemplate: function(model, options){
+      var outletName = parseInt(options.response.id, 10).toString();
       this.render('items/detail', {
         'into': 'items',
-        'outlet': options.index
+        'outlet': outletName
       });
     },
     actions: {
-        willTransition: function() {
-            this.disconnectOutlet(this.context.index);
+        willTransition: function() {                     this.disconnectOutlet(this.context.response.id);
         }
     }
-});
+});
+
+export default route({model})(DetailRoute);
diff --git a/items.detail.template.hbs b/items.detail.template.hbs
@@ -1 +1 @@
-<p>the detail template!</p>
+<p>the detail template {{model.response.id}}</p>
diff --git a/items.route.js b/items.route.js
@@ -0,0 +1,8 @@
+import fetch from 'fetch';
+import route from 'ember-redux/route';
+
+var model = (dispatch) => {
+    return fetch('/api/items').then(fetched => fetched.json()).then(response => dispatch({type: 'TRANSFORM_LIST', response: response}));
+};
+
+export default route({model})();
diff --git a/mirage.config.js b/mirage.config.js
@@ -0,0 +1,21 @@
+export default function() {
+  this.namespace = 'api';
+  this.get('/items', () => {
+    return {
+      items: [
+        {id: 1, name: 'one'},
+        {id: 2, name: 'two'},
+        {id: 3, name: 'three'}
+      ]
+    };
+  });
+  this.get('/items/1', () => {
+    return {id: 1, name: 'one', number: 1};
+  });
+  this.get('/items/2', () => {
+    return {id: 1, name: 'two', number: 2};
+  });
+  this.get('/items/3', () => {
+    return {id: 1, name: 'three', number: 3};
+  });
+}
diff --git a/my-results.component.js b/my-results.component.js
@@ -1,17 +1,17 @@
 import Ember from 'ember';
 import hbs from 'htmlbars-inline-precompile';
+import connect from 'ember-redux/components/connect';
 
-export default Ember.Component.extend({
-  items: Ember.computed(function() {
-    return [{
-      id: 1,
-      name: 'one'
-    },{
-      id: 2,
-      name: 'two'
-    }];
-  }),
+var stateToComputed = (state) => {
+  return {
+    items: state.items.all
+  };
+};
+
+var MyResultsComponent = Ember.Component.extend({
   layout: hbs`
     {{yield items}} 
   `
 });
+
+export default connect(stateToComputed)(MyResultsComponent);
diff --git a/reducers.index.js b/reducers.index.js
@@ -0,0 +1,5 @@
+import items from './items';
+
+export default {
+    items: items
+};
diff --git a/reducers.items.js b/reducers.items.js
@@ -0,0 +1,18 @@
+const initialState = {
+  all: [],
+  selected: null
+};
+
+export default ((state, action) => {
+    if (action.type === 'TRANSFORM_LIST') {
+        return Object.assign({}, state, {
+            all: action.response.items
+        });
+    }
+    if (action.type === 'TRANSFORM_DETAIL') {
+        return Object.assign({}, state, {
+            selected: action.response.item
+        });
+    }
+    return state || initialState;
+});
diff --git a/twiddle.json b/twiddle.json
@@ -1,5 +1,11 @@
 {
   "version": "0.10.4",
+  "ENV": {
+    "ember-cli-mirage": {
+      "enabled": true,
+      "directory": "app/mirage"
+    }
+  },
   "EmberENV": {
     "FEATURES": {}
   },
@@ -9,9 +15,13 @@
   },
   "dependencies": {
     "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
-    "ember": "2.7.0",
+    "ember": "2.6.2",
     "ember-data": "2.7.0",
-    "ember-template-compiler": "2.7.0"
+    "ember-template-compiler": "2.6.2"
   },
-  "addons": {}
+  "addons": {
+    "ember-redux": "1.5.0",
+    "ember-fetch": "1.3.0",
+    "ember-cli-mirage": "0.2.1"
+  }
 }
diff --git a/items.detail.route.js b/items.detail.route.js
@@ -1,13 +1,15 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
-    model: function() {
-        return {};
-    },
-    renderTemplate: function(){
+    renderTemplate: function(model, options){;
       this.render('items/detail', {
-        'into':'items',
-        'outlet': 'main'
+        'into': 'items',
+        'outlet': options.index
       });
+    },
+    actions: {
+        willTransition: function() {
+            this.disconnectOutlet(this.context.index);
+        }
     }
 });
diff --git a/items.detail.template.hbs b/items.detail.template.hbs
@@ -1 +1 @@
-<p>detail template showing</p>
+<p>the detail template!</p>
diff --git a/items.route.js b/items.route.js
@@ -1,7 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-  model() {
-    return {};
-  }
-});

diff --git a/items.template.hbs b/items.template.hbs
@@ -1 +1,5 @@
-{{outlet}}
+{{#my-results as |items|}}
+  {{#my-list items=items as |index|}}
+    {{outlet (plus-one index)}}
+  {{/my-list}}
+{{/my-results}}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,7 +1,3 @@
 {{#app-layout}}
-  {{#my-results as |items|}}
-    {{#my-list items=items as |index|}}
-      {{outlet "main"}}
-    {{/my-list}}
-  {{/my-results}}
+  {{outlet}}
 {{/app-layout}}
diff --git a/app-layout.component.js b/app-layout.component.js
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Component.extend({
+  layout: hbs`
+    {{yield}}
+  `
+});
diff --git a/helpers.plus-one.js b/helpers.plus-one.js
@@ -0,0 +1,5 @@
+import Ember from "ember";
+
+export default Ember.Helper.helper(function(params) {
+    return parseInt(params[0], 10) + 1;
+});
diff --git a/items.detail.route.js b/items.detail.route.js
@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+    model: function() {
+        return {};
+    },
+    renderTemplate: function(){
+      this.render('items/detail', {
+        'into':'items',
+        'outlet': 'main'
+      });
+    }
+});
diff --git a/items.detail.template.hbs b/items.detail.template.hbs
@@ -0,0 +1 @@
+<p>detail template showing</p>
diff --git a/items.route.js b/items.route.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model() {
+    return {};
+  }
+});
diff --git a/items.template.hbs b/items.template.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/my-list.component.js b/my-list.component.js
@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Component.extend({
+  layout: hbs`
+    {{#each items as |item index|}}
+      <div>{{item.name}}</div>
+      {{#link-to "items.detail" (plus-one index)}}details{{/link-to}}
+      {{yield index}}
+    {{/each}}
+  `
+});
diff --git a/my-results.component.js b/my-results.component.js
@@ -0,0 +1,17 @@
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+
+export default Ember.Component.extend({
+  items: Ember.computed(function() {
+    return [{
+      id: 1,
+      name: 'one'
+    },{
+      id: 2,
+      name: 'two'
+    }];
+  }),
+  layout: hbs`
+    {{yield items}} 
+  `
+});
diff --git a/router.js b/router.js
@@ -0,0 +1,15 @@
+import Ember from 'ember';
+import config from './config/environment';
+
+const Router = Ember.Router.extend({
+  location: 'none',
+  rootURL: config.rootURL
+});
+
+Router.map(function() {
+    this.route('items', {path: '/'}, function() {
+        this.route('detail', {path: '/detail/:index'});
+    });
+});
+
+export default Router;
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,7 @@
+{{#app-layout}}
+  {{#my-results as |items|}}
+    {{#my-list items=items as |index|}}
+      {{outlet "main"}}
+    {{/my-list}}
+  {{/my-results}}
+{{/app-layout}}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,17 @@
+{
+  "version": "0.10.4",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": true,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.7.0",
+    "ember-data": "2.7.0",
+    "ember-template-compiler": "2.7.0"
+  },
+  "addons": {}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<p>the detail template!</p>
		<p>the detail template {{model.response.id}}</p>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<p>detail template showing</p>
		<p>the detail template!</p>