New tab model hook issue

Ember Data
1

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.

//routes/index.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.

//adapters/application.js

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

export default JSONAPIAdapter.extend({

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

    }
});

//templates/pic.hbs

<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>

{{outlet}}

//templates/index.hbs

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

//templates/components/image-list.hbs

{{#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}}
{{yield}}

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

2

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.

3

@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

Router.map(function() {
    this.route('index',{path:'/'});
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”?

4

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 }} .

5

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 : http://i.hizliresim.com/goZ3B3.png

@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.

6

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

7

Okay I sent you a message.