New Twiddle

controllers.application.js

import Ember from 'ember';

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

models.image.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
    id: attr(),
    image: attr()
});

router.js

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

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('1');
  this.route('2');
  this.route('3');
  this.route('4');
});

export default Router;

routes.1.js

import Ember from 'ember';

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

routes.2.js

import Ember from 'ember';

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

routes.3.js

import Ember from 'ember';

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

routes.4.js

import Ember from 'ember';

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

routes.image.js

import Ember from 'ember';

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

routes.index.js

import Ember from 'ember';
 

var images = [{
    id: 1,
    image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
}, {
    id: 2,
    image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
}, {
    id: 3,
    image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
},{
    id: 4,
    image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
}];

export default Ember.Route.extend({
    model() {
        return images;
    }
});

templates.1.hbs

{{#link-to "index"}}<p class="back">GERi</p>{{/link-to}}
<p class= "detail" ><img src='https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg' width=700px></p>


<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
<br/>
<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
{{outlet}}

templates.2.hbs

{{#link-to "index"}}<p class="back">GERi</p>{{/link-to}}
<p class= "detail" ><img src='https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg' width=700px></p>


<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
<br/>
<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
{{outlet}}

templates.3.hbs

{{#link-to "index"}}<p class="back">GERi</p>{{/link-to}}

<p class= "detail" ><img src='https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg' width=700px></p>


<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
<br/>
<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
{{outlet}}

templates.4.hbs

{{#link-to "index"}}<p class="back">GERi</p>{{/link-to}}
<p class= "detail"><img src='https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg' width=700px></p>


<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
<br/>
<p class="info">Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.Blah blah blah.</p>
{{outlet}}

templates.application.hbs

{{outlet}}

templates.index.hbs

{{#each model as |images|}}
  <div>{{#link-to (concat images.id)}}<img src={{images.image}} width="500">{{/link-to}}</div>
{{/each}}

twiddle.json

{
  "version": "0.8.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.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}