我在从 map View 的 render() 函数中的集合中获取数据时遇到问题。我尝试以多种方式获取数据,但似乎无法正确获取。这就是我目前所在的位置 https://jsfiddle.net/huntonas/pt17bygm/89/
APP = {};
APP.ArtPiece = Backbone.Model.extend({
defaults: {
first_name: null,
title: null,
location: null,
description: null,
last_name: null,
longitude: null,
latitude: null,
type: null,
medium: null
}
});
APP.ArtPieces = Backbone.Collection.extend({
model: APP.ArtPiece,
url: 'https://data.nashville.gov/resource/dqkw-tj5j.json'
});
APP.artPieces = new APP.ArtPieces();
APP.Map = Backbone.Model.extend({
defaults: {
center: new google.maps.LatLng(36.159480, -86.792112),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
});
APP.map = new APP.Map();
APP.MapView = Backbone.View.extend({
id: 'map',
initialize: function () {
this.collection.fetch();
this.map = new google.maps.Map(this.el, this.model.attributes);
this.render();
},
render: function () {
this.collection.each(function (artPiece) {
console.log(artPiece.toJSON());
var marker = new google.maps.Marker({
position: new google.maps.LatLng(artPiece.latitude, artPiece.longitude),
title: artPiece.title
});
return marker;
}, this);
$('#map').replaceWith(this.el);
}
});
APP.mapView = new APP.MapView({
model: APP.map,
collection: APP.artPieces
});
但它在 console.log 上没有显示任何内容。我认为这是因为集合中没有任何内容,但我不知道在哪里调用集合上的 fetch() 。有什么帮助吗?谢谢。
最佳答案
您的主要问题有两个:
Collection#fetch
是一个 AJAX 调用,您无需关注它何时返回集合数据。this.collection.each
回调中的artPiece
将是一个模型实例。模型不会将其属性存储在属性中,而是存储在attributes
属性内并通过model.get('attribute_name')
访问。
解决第一个问题非常容易。调用fetch
使用 reset: true
选项(以便触发 'reset'
事件),然后将 View 的 render
绑定(bind)到集合的 >“重置”
事件:
initialize: function() {
this.collection.fetch({ reset: true });
this.listenTo(this.collection, 'reset', this.render);
//...
}
现在,当集合从远程服务器获取某些内容时,将调用 View 的 render
。
解决第二个问题也很容易,我们将在此过程中解决另一个其他问题。创建标记时,您需要告诉它使用哪个映射,因此需要将 map: this.map
添加到构造函数参数中。如果我们这样做并开始使用 get
,我们就会:
el: '#map',
render: function () {
this.collection.each(function (artPiece) {
var marker = new google.maps.Marker({
map: this.map,
position: new google.maps.LatLng(
artPiece.get('latitude'),
artPiece.get('longitude')
),
title: artPiece.get('title')
});
}, this);
}
不需要说id: 'map'
然后在render
中调用replaceWith
,你可以直接说el:改为“#map”
。
关于javascript - Backbone 收集数据谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28422111/