Question

我再次与EmberJS中的适配器挣扎。这次它与使用ember-data-url-templates的嵌套api请求有关。

首先，相关代码：

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

这个想法是一门课程包含几个问题。 api以嵌套方式提供数据：

/courses > all the courses
/courses/{courseId} > detailed course info
/courses/{courseId}/lesson/{lessonId}/ > detailed lesson info

此代码在导航内部时工作正常。应用程序，如不直接访问路由。然后它显示适当的标题，正文以及它所属的课程。但是，当直接导航到/ courses / 1 / lesson / 3时，适配器无法从快照中找到courseId，因为请求指向http://coursedev.api/courses//lesson/3。注意缺少courseId。该URL不存在，因为应该提供courseId。

我的第一个问题是，处理嵌套api URL的方法是否正确？如果是这种情况，那么应该如何收集courseId以对api做出正确的请求？

再次感谢！

Answer 1

好的，是的。我理解你的困惑。

当你已经上课时，你所拥有的工作正常。直接导航到课程时，您需要从URL获取课程ID，并以某种方式将其传递给适配器。对此没有明显更好的解决方案;以下是一些选项，按优先顺序排列：

1。不要在API中使用嵌套的URL

如果您可以控制API的结构，我建议不要以这种方式嵌套资源。以嵌套方式（例如/courses/:course_id/lessons）加载集合子资源可能是有意义的，但/lessions/:lesson_id优先于/courses/:course_id/lessons/:lesson_id。

但是，您可能无法控制您的API，这正是创建ember-data-url-templates的原因......

2。使用queryRecord

您可以使用queryRecord加载一条记录并传递更多只是id的信息。

// adapter
export default AppAdapter.extend(UrlTemplates, {
  queryRecordUrlTemplate: '{+host}/courses/{course_id}/lesson/{lesson_id}',
});

// route
this.store.queryRecord('lesson', params);

3。使用服务

将信息传递到适配器的另一种方法是使用服务。这种方法看起来并不适合您的情况，但我会将其包含在此处，以防它有助于解决其他类似问题。我经常使用服务来保存一般会话信息（例如用户ID）。以下是使用会话服务完成上述操作的方法：

// adapter
export default AppAdapter.extend(UrlTemplates, {
  session: Ember.inject.service(),
  findUrlTemplate: '{+host}/courses/{courseId}/lesson/{id}',

  urlSegments: {
    courseId() { return this.get('session.courseId'); },
  },
});

// somewhere else in your application
this.set('session.courseId', params.course_id);

// route model hook
this.store.findRecord('lesson', params.lesson_id);

我希望这会有所帮助：）

Answer 2

幻灯片：http://www.slideshare.net/RyanMHarrison/nest-v-flat-with-emberdata

视频：https://www.youtube.com/watch?v=DjAMSjFPLW8

使用buildURL和@ amiel的附加组件ember-data-url-templates详细说明嵌套选项。

建议避免服务。
使用快照而不是查询（适用于其他商店方法，包括findAll()和findRecord()）。 YMMV。
如果您只需要只读访问且API为HATEOAS风格，则链接是一个选项。

EmberJS使用ember-data-url-templates定制适配器

2 个答案:

1。不要在API中使用嵌套的URL

2。使用queryRecord

3。使用服务