javascript - 将管理某些内容的 View 传递给第二个 View - Backbone

Question

我有两个 View ，一个用于渲染谷歌地图，另一个用于渲染包含纬度和经度的事件列表，以在包含谷歌地图的 View 上渲染标记。当我尝试将管理 map 的 View 传递给第二个 View 的初始化方法并保存实例引用时，在控制台中显示以下错误:

这是我的代码

app.js

var ev = new Application();

ev.Router = Backbone.Router.extend({

    routes: {
        "": "home",
        "evento/:id" : "evento"
    }, 

    home: function(){
        var mapView = new ev.views.Home();
        $('#home').html(mapView.el);
        $('#rightcolumn').html(new ev.views.Home_Eventos(mapView).el);
    },

    evento: function(id){
        $('#rightcolumn').html(new ev.views.Evento(id).el);

    }
});

$(document).on('ready', function() {
    // Load HTML templates for the app
    ev.templateLoader.load(['shell', 'home', 'home_list_eventos', 'evento'], function () {
        ev.shell = new ev.views.Shell({el: "#shell"});
        ev.router = new ev.Router();
        Backbone.history.start();
    });
});

home.js

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

    initMap: function(){

        var that = this;
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos;
                pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                var infowindow = new google.maps.InfoWindow({
                    map: that.map,
                    position: pos
                });

                that.map.setCenter(pos);
            });
        }

        var mapOptions = {
            zoom: 12,
        };
        that.map = new google.maps.Map(that.$el.find('#map_canvas')[0],mapOptions);
        google.maps.event.addDomListener(window, "resize", function() {
            var center = that.map.getCenter();
            google.maps.event.trigger(that.map, "resize");
            that.map.setCenter(center); 
        });
    },

    render: function(){

                this.$el.html(this.template());
                this.initMap();
                return this;    
    }
});

home_events.js

ev.views.Home_Eventos = Backbone.View.extend({
    initialize: function(mapView){
        this.template = _.template(ev.templateLoader.get('home_list_eventos'));
        this.mapView = mapView;
        console.log(this.mapView.map);
        this.render();
        console.log("sou inicializado");
    },

    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){
                    var myLatlng = new google.maps.LatLng(marcador.get('latitude'),marcador.get('longitude'));
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                    });

                });
                    }, 6000);

                return that;
            }
        });
    }

});

文档模板:shell.html:

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    ...
</nav>

<div class="wrapper-home" id="home">

</div><!--/.fluid-container-->

home.html:

<div id="leftcolumn">
    <div id="map_canvas"></div>
    </div>
    <div id="rightcolumn">
        <div class="row">
        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pesquisar">Pesquise</label>
                    <input type="text" class="form-control" id="pesquisar" placeholder="Pesquisar...">
                </div>
                <div class="form-group">
                    <label for="quando">Quando</label>
                    <input type="text" class="form-control" id="quando" placeholder="Quando">
                </div>
            </form>
        </div>

        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pac-input">Onde</label>
                    <input type="text" class="form-control" id="pac-input" placeholder="Onde">
                </div>
                <div class="form-group">
                    <label for="genero">Género</label>
                    <input type="text" class="form-control" id="genero" placeholder="Genero">
                </div>
            </form>
        </div>

        <div class="col-xs-5 coluna-input">
            <button id="search" type="button" class="btn btn-primary botao">Pesquisar</button>
        </div>

        <div class="col-xs-5 coluna-input">
            <button type="button" class="btn btn-danger botao">Mais Filtros</button>
        </div>

    </div>
    <hr class="linha"/>

    <div class="row" id="lista">
        <div class="table">
            <tbody>
                <% _.each(imagens, function(imagem){  %>
                <tr>
                    <div class="col-xs-5 coluna-input">
                        <img src="<%= imagem.get('imagem') %>" class="img-responsive  back" alt="Responsive image">
                        <a href='#evento/<%= imagem.get('id') %>' class="btn btn-primary">Ver Mais</a>
                    </div>
                </tr>
                <% }); %>
            </tbody>
        </div>

    </div>
    </div>

Answer 1

您初始化new ev.views.Home_Eventos(mapView)作为 $.html() 的参数，这很好，只是该 View 中的渲染函数是“异步”的，因为其中的提取。所以el它返回应该是一个空 <div>因为成功回调直到 initialize 之后才会返回已完成。