Question

我正在使用jQuery mobile，Backbone.js require.js下划线和文本

当我使用没有ajax调用的地图时，它渲染得很好。但是如果我使用ajax调用，即使我不使用来自ajax调用的返回数据，地图没有完全显示。但是因为我需要调用ajax并获取数据并最终使用它来绘制地图，我需要让ajax调用工作。

的test.html

    <div data-role="content" data-theme="a" id="main_content" class="margin-minus mainpage_content">         
  <div id="googleMap" class="gmaps_container" style="width:100%; height:150px;"></div>
</div>

test.js

define(['jquery', 'underscore', 'backbone', 'app', 'text!modules/user/u_main/test.html'],
function ($, _, Backbone, App, test) {
    'use strict';
    var U_TestView = Backbone.View.extend({

        // template: "transactions.html",

        template: _.template(test),
        initialize: function () {

        },
        update: function () {

            //set callback of the event "fetchCompleted:Vouchers"
            this.model.bind('fetchCompleted:Test', this.render, this);
            this.model.fetch();
        },
        render: function () {
            this.$el.empty();
            //compile template using the data fetched by collection
            this.$el.append(this.template());
            this.renderMap();
        },
        renderMap: function () {
             var latlng = new google.maps.LatLng("-34.397","148.644");
        var options = {
            zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(this.$el.find('#googleMap')[0], options);

            this.trigger("renderCompleted:Test", this);
        }


    });
    return U_TestView;
});

model.js

define(['jquery', 'underscore', 'backbone', 'model/user/u_testModel'],
function ($, _, Backbone, Test) {

    var TestModel = Backbone.Model.extend({

        //fetch data using Ajax
        //and then dispatch customized event "fetchCompleted:Test"
        fetch: function () {

                var self = this;

                //fetch the data using ajax

                 var jqxhr = $.getJSON("data/u_main.json")
                .success(function (data, status, xhr) {
                self.trigger("fetchCompleted:Test");
                })

            }

    });

    return TestModel;
});

router.js

 var testModel = new U_TestModel();
 var testView = new U_TestView({ model: testModel });

 testView.bind('renderCompleted:Test', this.changePageMap, this);
 testView.update();

如果我删除了ajax调用而且只是这样做 self.trigger（＆＃34; fetchCompleted：测试＆＃34）; 它渲染得很好。

你们能帮我解决这个问题吗？我尝试过很多东西 google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）;

但对我来说并不是真的有用。请帮忙!!!!

当我在backbone.js中进行ajax调用时，谷歌地图不会完全显示

0 个答案: