Рельсы, соединяющие с jBuilder - PullRequest
Новая
       23

Рельсы, соединяющие с jBuilder

0 голосов
/ 10 марта 2020

Chrome ошибка: 

jquery.js:8678 GET http://localhost:3000/people/locations/location_data.geojson 404 (Not Found)
send @ jquery.js:8678
ajax @ jquery.js:8327
jQuery.<computed> @ jquery.js:8464
getJSON @ jquery.js:8448
makeMapTwo @ mapPersonLeaflet.js:22
(anonymous) @ mapPersonLeaflet.js:10

Я пытаюсь получить значения через has_many :through отношение. Три основные базы данных: люди, местоположения (с указанием адреса и другой информации) и таблица соединений years, которая связывает человека с конкретным адресом на указанную дату c. 

# models/person.rb
class Person < ApplicationRecord
  has_many :years, dependent: :destroy 
  has_many :locations, through: :years

# models/location.rb
class Location < ApplicationRecord
  has_many :years
  has_many :people, through: :years

# models/year.rb
class Year < ApplicationRecord
  belongs_to :location
  belongs_to :person

years связывает человека с определенным адресом в конкретную c дату.

С views/people/show.html.erb (конечно, страница для конкретного человека, которую я надеюсь показать детали о человеке, включая местоположения, с которыми он был связан). 

<div id="map" class="map"></div>  
  <%= javascript_pack_tag 'mapPersonLeaflet' %>
<div>

С javascript/packs/mapPersonLeaflet.js

document.addEventListener('DOMContentLoaded', function () {
  makeMapTwo(); // LINE 10 in Chrome error above
});
function makeMapTwo(){
  var mapVar = L.map("map", { center: [34.040951, -118.258579], zoom: 13 });
  L.tileLayer('https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png').addTo(mapVar);
  $.getJSON("locations/location_data.geojson", function (data_data) { // LINE 22 in Chrome error above

Я помещаю файл jBuilder в папку views/people/locations/, потому что если я поставлю это в /people Я получил ошибку: 

ActiveRecord::RecordNotFound - Couldn't find Person with 'id'=location_data:
  app/controllers/people_controller.rb:118:in `set_person'

views/people/locations/location_data.json.jbuilder

json.type "FeatureCollection"
json.features @person.years do |year|
# Person has_many :locations, through: :years  
  json.type "Feature"    
  json.properties do
    json.set! "marker-color", "#C978F3" # will make this different for resto and resid a
     # json.title year.resto
    json.name year.full_name
  end
  json.geometry do
     json.type "Point"
     json.coordinates [year.location['longitude'], year.location['latitude']]
  end # json.geometry
end # features

Никогда не попадает в вышеуказанный файл. Сбой на $.getJSON("locations/location_data.geojson", function (data_data) { с ошибкой в ​​Терминале 

Started GET "/people/locations/location_data.geojson" for ::1 at 2020-03-09 18:47:05 -0700

NameError - uninitialized constant People:

Я не могу понять, к какому People это относится. Я знаю, что это не до .jbuilder сделать c, потому что если я удаляю все в этом делать c я получаю ту же ошибку.

Что-то не так с моими путями. Опечатка где-нибудь?

С routes.rb У меня есть эта строка get 'people/locations/location_data', :defaults => { :format => 'json' }

PS. Я попробовал это пару месяцев go как скрипт OpenLayers, но вернулся к Leaflet, так как у меня был успех с Leaflet, и надеюсь go вернуться к OpenLayers, где у меня возникли проблемы Перемещение переменной Rails jBuilder

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Я бы начал с создания вложенного маршрута, который обслуживает JSON для заполнения карты: 

resources :people do
  # ...
  resources :locations, only: [:index], module: :people
end

Затем настройте контроллер: 

module People
  class LocationsController < ApplicationController
    before_action :set_person
    # GET /people/1/locations.json
    def index
      respond_to do |f|
        f.json
      end
    end

    private
    def set_person
      @person = Person.eager_load(:locations)
                      .find(params[:person_id])
      @locations = @person.locations
    end
  end
end

Вы можете переименовать шаблон /people/locations/index.json.jbuilder.

Затем настройте элемент карты так, чтобы он имел атрибут данных, который сообщает javascript, куда загрузить JSON из: 

<%= content_tag :div, "",
        class: "map personal-map",
        data: { src: person_locations_path(@person, format: :json) }
%>

Также получите избавиться от <%= javascript_pack_tag 'mapPersonLeaflet' %> - просто скажите «нет» встроенным тегам скрипта !

Затем вы можете просто создать скрипт в конвейере ресурсов, который ищет элементы с классом personal-map и дополняет их : 

function personalMap(el){
  var map = L.map(el, { center: [34.040951, -118.258579], zoom: 13 });
  L.tileLayer('https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png')
    .addTo(map);
  $.getJSON(el.dataset.src).done(function(data){
    L.geoJSON(data).addTo(map)
  });
  return map;
}

document.addEventListener('DOMContentLoaded', function () {
  // you could also use $('.personal-map').each or the less sucky ES6
  // equivilent
  var personalMaps = Array.prototype.map.call(
    document.getElementsByClassName('personal-map'), 
    personalMap
  );
});

Если вы хотите передать любую другую информацию из вида на карту (например, границы или масштабирование), используйте атрибуты данных в элементе карты.

0 голосов
/ 10 марта 2020

Ваш маршрут не указывает контроллер и действие, к которому он привязан, добавьте параметр :to, чтобы исправить это: 

get 'people/locations/location_data', :to => 'people#location_data', :defaults => { :format => 'json' }

Я предполагаю, что в противном случае маршрутизатор интерпретирует маршрут по-другому.

...