Rails 连接到 jBuilder
Rails connecting to jBuilder
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
关系获取值。三个主要数据库:人员、位置(具有街道地址和其他信息)以及连接 table、years
,它将此人链接到特定日期的特定地址。
# 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
将此人链接到特定日期的特定地址。
来自 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 文档,因为如果我删除该文档中的所有内容,我会得到同样的错误。
我的路径有问题。某处打字错误?
来自 routes.rb
我有这条线 get 'people/locations/location_data', :defaults => { :format => 'json' }
PS。几个月前,我将其作为 OpenLayers 脚本进行了尝试,但由于我在 Leaflet 上取得了成功,所以又回到了 Leaflet,并希望回到我遇到相关问题的 OpenLayers Rails passing variable to jBuilder
您的路线没有指定控制器和它映射到的操作,添加 :to
参数来解决这个问题:
get 'people/locations/location_data', :to => 'people#location_data', :defaults => { :format => 'json' }
我假设路由器以不同的方式解释路由。
我将从创建一个嵌套路线开始,该路线服务 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
class 的元素并扩充它们:
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
);
});
如果您想将任何其他信息从视图传递到地图(如边界或缩放),请使用地图元素上的数据属性。
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
关系获取值。三个主要数据库:人员、位置(具有街道地址和其他信息)以及连接 table、years
,它将此人链接到特定日期的特定地址。
# 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
将此人链接到特定日期的特定地址。
来自 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 文档,因为如果我删除该文档中的所有内容,我会得到同样的错误。
我的路径有问题。某处打字错误?
来自 routes.rb
我有这条线 get 'people/locations/location_data', :defaults => { :format => 'json' }
PS。几个月前,我将其作为 OpenLayers 脚本进行了尝试,但由于我在 Leaflet 上取得了成功,所以又回到了 Leaflet,并希望回到我遇到相关问题的 OpenLayers Rails passing variable to jBuilder
您的路线没有指定控制器和它映射到的操作,添加 :to
参数来解决这个问题:
get 'people/locations/location_data', :to => 'people#location_data', :defaults => { :format => 'json' }
我假设路由器以不同的方式解释路由。
我将从创建一个嵌套路线开始,该路线服务 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
class 的元素并扩充它们:
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
);
});
如果您想将任何其他信息从视图传递到地图(如边界或缩放),请使用地图元素上的数据属性。