将全局变量传递给另一个视图主干

Pass a global variable to another view backbone

本文关键字：视图 另一个 全局变量      更新时间：2023-09-26

我有一个渲染了地图的视图，这个视图有一个全局变量map，并希望将此变量传递给另一个视图以在该地图中渲染制作者。可以做到吗？

first_view

ev.views.Home = Backbone.View.extend({
    map: 'null',
    initialize: function(){
        this.template = _.template(ev.templateLoader.get('home'));
        this.render();
    },
    initMap: function(){
        ...
    },
    render: function(){
                this.$el.html(this.template);
                this.initMap();
                return this;
    }   
});

second_view

ev.views.Lista = Backbone.View.extend({
initialize: function(){
    this.template = _.template(ev.templateLoader.get('lista_eventos'));
    this.render();
},
render: function(){
    var that = this;
    var imagens = new ev.models.ImagemCollection();
    imagens.fetch({
        success: function(){
            that.$el.html(that.template({imagens: imagens.models}));
            var marcadores = imagens.models;
            setTimeout(function() {
            _.each(marcadores, function(marcador){
                console.log("aquiiiiii");
                var myLatlng = new google.maps.LatLng(marcador.get('latitude'),marcador.get('longitude'));
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: this.map,
                });
            });
                }, 10000);
        }
    });
}
});

编辑：

将 ev.views.lista render方法合并到 ev.views.Home 的方法render，如下所示：

ev.views.Home = Backbone.View.extend({
        map: 'null',
        initialize: function(){
            this.template = _.template(ev.templateLoader.get('home'));
            this.render();
        },
        initMap: function(){
            ...
        },
        render: function(){
        var that = this;
        var imagens = new ev.models.ImagemCollection();
        imagens.fetch({
        success: function(){
            that.$el.html(that.template({imagens: imagens.models}));
            that.initMap();
            var marcadores = imagens.models;
            setTimeout(function() {
            _.each(marcadores, function(marcador){
               var myLatlng = new google.maps.LatLng(marcador.get('latitude'),marcador.get('longitude'));
                   var marker = new google.maps.Marker({
                       position: myLatlng,
                       map: that.map,
                });
            });
            }, 10000);
            return that;
        }
    });
}

    });

首先，我不明白你所说的全局是什么意思。在您的代码中，我看不到全局变量。我认为你滥用了这个词。

设计需要受到质疑。国家的责任可能有利于被置于不同的背景/等级制度中。即便如此，我还是会用目前能想到的最简单的答案来回答。将管理映射的视图传递给第二个视图的initialize方法，并保存实例引用。

更改ev.views.Lista.initialize()方法以接受参数。然后保存引用。最后从渲染函数引用地图视图。

ev.views.Lista = Backbone.View.extend({
  initialize: function(mapView) {
    this.mapView = mapView;
    this.render();
  },
  render: function() {
    this.mapView.map; // Your map object you want.
  }
});
var myMapView   = new ev.views.Home();
var myListaView = new ev.views.Lista(myListaView);

警告！

通过这样做，您可以将您的视图紧密地结合在一起。这是一种非常糟糕的代码气味，将来当您回来尝试维护或扩展代码时，会引起心痛。尽量避免这样的事情，永远不要寻求短期的解决方案。如上所述，更好的答案是重新设计对其他对象的责任。也许有一个管理地图的 MapManager，可以查询对感兴趣的地图对象的引用。

ev.MapManager = {
  maps: {},
  add: function(name, map) {
    this.maps[name] = map;
  },
  remove: function(name) {
    this.maps[name] = null;
  },
  get: function(name) {
    return this.maps[name];
  }
};
相关文章：