I'm once again struggling with the adapters in EmberJS. This time it's related to nested api requests with the usage of ember-data-url-templates.
First of all, the relevant code:
// /app/application/adapter.js
import DS from 'ember-data';
var AppAdapter = DS.JSONAPIAdapter.extend({
host: 'http://coursedev.api'
});
export default AppAdapter;
// /app/router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('courses');
this.route('course', { path: '/course/:course_id' });
this.route('lesson', { path: '/course/:course_id/lesson/:lesson_id' });
});
export default Router;
// app/course/model.js
import DS from 'ember-data';
export default DS.Model.extend({
order: DS.attr('number'),
title: DS.attr('string'),
body: DS.attr('string'),
lessons: DS.hasMany('lesson')
});
// app/lesson/model.js
import DS from 'ember-data';
export default DS.Model.extend({
order: DS.attr('number'),
title: DS.attr('string'),
body: DS.attr('string'),
course: DS.belongsTo('course'),
questions: DS.hasMany('question')
});
// app/lesson/adapter.js
import AppAdapter from '../application/adapter';
import UrlTemplates from "ember-data-url-templates";
export default AppAdapter.extend(UrlTemplates, {
urlTemplate: '{+host}/courses/{courseId}/lesson/{id}',
urlSegments: {
host: function () {
return this.get('host');
},
courseId: function(type, id, snapshot, query) {
return snapshot.belongsTo('course', { id: true });
}
}
});
// app/lesson/route.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('lesson', params.lesson_id );
}
});
// app/lesson/template.hbs
<h1>{{model.title}}</h1>
{{model.body}}
<br>
This lesson is part of {{#link-to 'course' model.course.id}}{{model.course.title}}{{/link-to}}
The idea is that a course consists of several questions. The api provides data in a nested way:
/courses > all the courses
/courses/{courseId} > detailed course info
/courses/{courseId}/lesson/{lessonId}/ > detailed lesson info
This code is working fine when navigating 'inside' the application, as in, not accessing the route directly. It then shows the appropriate title, body and which course it is part of. But, when navigating to /courses/1/lesson/3 directly, the adapter isn't able to find the courseId from the snapshot since the request is pointed to http://ift.tt/1TT8Wl6. Note the lack of the courseId. This URL doesn't exist, since a courseId should be provided.
My first question is, is the approach above right to handle nested api urls? And if that is the case, then how should the courseId be gathered to do a proper request to the api?
A massive thanks again!
Aucun commentaire:
Enregistrer un commentaire