New tab model hook issue

Hello, I have a page that has pictures and when you click a picture, a detail page with bigger version of the picture and its content (pic.js) opens. When I was using hard-coded data, I created a service and put the data in it. By this way, the model hook wasn’t skipped when I click a picture. I did it because my links are dynamic {{#link-to}} helper and I saw that model hook gets skipped when you have it. But now, I need to use JSON api to get the data from an URL, when I do it in the index.js there is no problem with displaying it but when I try to open any link in new tab or paste a link in URL bar, model hook doesn’t work in pic.js.


import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return Ember.$.getJSON('My jsonApi Url');

I read that I need to use ember-data in order to fix it. I created a model “news-list” and put attributes in it. Also I created an adapter and take the code which I call API from index.js and put there.


import JSONAPIAdapter from 'ember-data/adapters/json-api';
import Ember from 'ember';

export default JSONAPIAdapter.extend({

        return Ember.$.getJSON('My jsonApi Url',params.NewsUrl);



<p class= "back">{{#link-to 'index'}}Anasayfa{{/link-to}}</p>
<p class="detail"><img src="{{model.Image}}" width="600" ></p>
<p class="content"><br/><br/>{{model.Content}}</p><br/><br/>
<p class= "back">{{#link-to 'index'}}Anasayfa{{/link-to}}</p>



{{image-list model=model.Data currentPos=currentPos }}


{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}    
     <p class="info">{{pic.Title}}</p><br/>
     <img src={{pic.Image}} width="300">
  {{/link-to}}</div> {{/each}}

Still nothing has changed. I guess there is something I’m missing. I can’t use ember-data properly. How can I fix it?

Hi, this is a common error when we use link-to helper. Take a look that link-to parameter. when you pass a Ember model it going to after id attribute. Use your own id as a link-to parameter. Follow the documentation below.

@heatbr hello, thanks for the response. I looked at this tutorial before, and looked again now, but couldn’t understand how it would help… In my router pic route {
this.route('pic', {path:'/news/:NewsUrl'});


and I go there by

{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}  .....

What exactly should I change here ? How am I gonna use my “own id”?

Check what is your json response.

    return Ember.$.getJSON('My jsonApi Url');

For instance

[ { id: 123, name: 'myPic.jpeg', newsUrl: '...url'
}, { id: 124, name: 'myPic2.jpeg', newsUrl: '...url'}  ]

ok, so for link-to use your id atribute. {{#link-to "pic" pic.newsUrl }} .

I tried it before, when I do it, the model hook doesn’t work even if I left click a picture .

This is what I see :

@heatbr I need to solve this asap… Do you have more suggestions? I can send you all of my code if you can help me! Like, in a twiddle.

Yeaph, If it isn’t a problem send me the code, It will be more efective to help you.

Okay I sent you a message.