backbone 采集数据 google 地图

Question

我无法从地图视图的 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() 。有什么帮助吗？谢谢

Answer 1

您的主要问题有两个：

Collection#fetch 是一个 AJAX 调用，当它 returns 包含您收集的数据时，您没有任何需要注意的地方。
this.collection.each 回调中的 artPiece 将是一个模型实例。模型不将它们的属性存储在属性中，它们存储在 attributes 属性中并由 model.get('attribute_name').

解决第一个问题非常简单。使用 reset: true 选项调用 fetch（这样它将触发 'reset' 事件），然后将视图的 render 绑定到集合的 'reset' 事件：

initialize: function() {
    this.collection.fetch({ reset: true });
    this.listenTo(this.collection, 'reset', this.render);
    //...
}

现在您的视图 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'。

更新演示：https://jsfiddle.net/ambiguous/jj8kopyk/

backbone 采集数据 google 地图

backbone collection data google map

javascript

google-maps

backbone.js

underscore.js