Ember настройка маршрутов для получения связанных данных из rails api

Question

У меня есть настройка приложения Ember, которая получает его данные из Rails API. У меня есть настройка маршрута прямо сейчас, когда работа, но не то, как я хочу. Действующая структура маршрута (для приложения 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 param. Если все разделы для всех опросов уже загружены в хранилище, и я увеличиваю этот раздел прямо сейчас, он переходит к следующему разделу независимо от того, с каким объектом survey_id он связан. Я не могу понять, как лучше настроить мои маршруты, чтобы сделать эту работу.

Рельсы 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, который гнездится в пользовательском интерфейсе, чего я не хочу. Может ли кто-нибудь дать мне какие-либо советы о том, как я могу настроить маршруты, не требуя мелких маршрутов в рельсах (если это возможно) и как я должен получать данные модели для каждого раздела, чтобы я мог перейти к следующему разделу в соответствующем опросе?

Текущая модель маршрутов для section забираются, как это в настоящее время:

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

} 

Answer 1

Я не уверен, что установка неглубоко: правда в вашем routes.rb файла. Однако для пользовательского интерфейса я использовал бы метод Ember Data hasMany на модели survey.

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

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

Если вы сериализовать links свойства при выборке опроса, вы можете направить hasMany к конкретной конечной точке в вашем API, и просто обрабатывать обзорные разделы для данного конкретного исследования в этом контроллере. Пример того, как сериализовать атрибут links на ваш SurveySerializer (если вы используете ActiveModelSerializers):

def links 
    { 
    sections: api_v1_survey_sections_path 
    } 
end 

Затем в 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 будет управлять идентификатором или моделью, которую вы передадите в динамический сегмент, исходя из того, что является «следующим». Прохождение модели, вероятно, будет иметь смысл, а не идентификатор, поэтому крючок модели 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' }); 
     }); 
    }); 
    }); 
});