Ember 设置路由以从 rails api 获取关联数据

Question

我有一个从 Rails API 获取数据的 Ember 应用设置。我现在有路线设置，但不是我想要的。当前的路由结构（对于 ember 应用程序）是这样的：

//router.js
Router.map(function() {
  this.route('surveys');
  this.route('survey', { path: 'surveys/:survey_id' }, function() {
    this.route('sections', { path: '/sections' });
  });

  this.route('section', {path: 'surveys/:survey_id/sections/:section_id'}, function() {
    this.route('survey_items', { path: 'survey-items' });
  });

});

在模型中我有调查，每个调查都有很多部分，每个部分都有很多调查项目。它的设置方式现在有点工作，但我的症结是，如果我去section 路线，我想要一个“下一步”按钮，当你点击它时，它会带你进入该调查的下一部分。现在我不能正确地做到这一点，因为我的section 路由仅通过传入的 id 参数查找部分来加载模型。如果所有调查的所有部分都已加载到商店中，并且我现在增加该部分，则无论它与哪个调查 ID 关联，它都会进入下一个部分。我不知道如何更好地设置我的路线来完成这项工作。

rails api 路由现在看起来像这样：

routes.rb
namespace :api do
  namespace :v1 do
    resources :surveys, shallow:true do
      resources :sections, shallow: true do
        resources :survey_items, path: '/survey-items'
      end
    end
  end
end

如您所见，在 Rails 路由中，我将 shallow: true 放在 surveys 和 sections 资源上。出于某种原因，当我让它们嵌套而没有浅层路由时，如果没有嵌套我的 ember 路由，我无法让 ember 加载正确的路由，它嵌套了我不想要的 UI。任何人都可以给我任何提示，告诉我如何设置我的路线而不需要在铁轨中使用浅层路线（如果可能的话），以及我应该如何获取每个部分的模型数据，以便我可以进入相关调查的下一部分？

section 当前的路由模型是这样获取的：

model(params) {
  return this.store.findRecord('section', params.section_id, { reload: true });

}

Answer 1

我不确定在您的 routes.rb 文件中设置 shallow: true 。但是，对于 UI，我会在 survey 模型上使用 Ember Data 的 hasMany 方法。

// survey.js
import DS from 'ember-data';

export default DS.Model.extend({
  sections: DS.hasMany('section')
});

如果您在获取调查时序列化 links 属性，则可以将 hasMany 定向到 API 中的特定端点，并在该控制器中将部分范围限定为该特定调查。如何序列化 SurveySerializer 上的 links 属性的示例（假设您使用的是 ActiveModelSerializers）：

def links
  {
    sections: api_v1_survey_sections_path
  }
end

然后在 UI 中的 sections 路由中，我将只返回模型挂钩中的那些调查部分：

// sections.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    var survey = this.modelFor('survey');

    return survey.get('sections');
  }
});

我会将link-to 的section 路由放入您的sections 模板中。 sections 控制器将根据“下一个”来管理您将传递给其动态段的 id 或模型。传递模型可能比传递 id 更有意义，因此将跳过 section 模型钩子。

最后，你有什么理由没有像这样在router.js 文件中写你的路线？

// router.js
Router.map(function() {
  this.route('surveys');
  this.route('survey', { path: 'surveys/:survey_id' }, function() {
    this.route('sections', function() {
      this.route('section', {path: ':section_id'}, function() {
        this.route('survey_items', { path: 'survey-items' });
      });
    });
  });
});