CODEWITHSUNDEEP
jsonember.js
Sebastian
Sebastian

Reputation: 289

EmberJS JSONAPIAdapter w/ hasMany

I'm having a problem with understanding EmberJS's models and relationships, especially in combination with async and the JSONAAPIAdapter. I need to use the JSON api standard.

The versions I'm using are Ember 2.2.0 and Ember-data v2.3.0-beta.5. What I'm trying to accomplish is a rather simple structure where a list of courses is given, and once clicked on a course, it should display a list of lessons within that specific course. Nothing too difficult, but still I'm struggling.

Although the code below does work, but it does not seem to reload models when navigating from one course to another. When accessing /course/1/ for example, it shows the correct lessons. But when navigating from /courses to a course by clicking on it, it does not seem to load. I thought by setting async to true it should handle this as a different request, but that does not seem to be the case.

Here's my code:

/app/application/adapter.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
    host: 'http://coursedev.api'
});

Router

Router.map(function() {
  this.route('courses');
  this.route('course', { path: '/course/:course_id'}, function() {

  });
});

/courses/route.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return Ember.RSVP.hash({
            courses: this.store.findAll('course')
        });
    }
});

/courses/template.hbs

<h1>Courses list</h1>

<section class="block-list">
    <ul>
    {{#each model.courses as |course|}}
        <li class="with-chevron">{{#link-to 'course' course}}{{course.title}}{{/link-to}}</li>
    {{else}}
        <li>No courses have been found.</li>
    {{/each}}   
    </ul>
</section>

/course/model.js

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    lessons: DS.hasMany('lesson', { async: true } )
});

/course/route.js

import Ember from 'ember';

export default Ember.Route.extend({
    model(params) {
        return this.store.findRecord('course', params.course_id);
    }
});

/course/template.hbs

<h1>{{model.title}}</h1>

{{model.body}}

<br /><br />

<h2>Lessons in this course</h2>

{{model.lessons}}

<section class="block-list">
    <ul>
    {{#each model.lessons as |lesson|}}
        <li class="with-chevron"><a>{{lesson.title}}</a></li>
    {{else}}
        <li>No lessons have been found for this course.</li>
    {{/each}}   
    </ul>
</section>

/lesson/model.js

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    body: DS.attr('string'),
    course: DS.belongsTo('course', { async: true })
});

The JSON data provided by the api can be found here:

api/courses http://pastebin.com/hxY502gT

api/courses/1 http://pastebin.com/LDSsbuzr

I've found an issue on the ember-data repo GitHub regarding model refreshes, but I'm not sure if that is the same problem. As said before, the async option is there to do new requests to gather the right lessons for each course, right?

Hopefully somebody can point me in the right direction. Thanks in advance!

Upvotes: 0

Views: 134

Answers (1)

Sebastian
Sebastian

Reputation: 289

I solved it! Apparently the link to a course should be done via course.id instead of just course.

{{#link-to 'course' course}} > {{#link-to 'course' course.id}}

Upvotes: 1

Related Questions