Question

我有一个应用程序，我已经开发了一段时间，现在总是在本地机器上。我现在将它放入服务器环境中，并且在将模板插入骨干视图时遇到与jQuery的.html（）函数的时间有关的问题。

代码（重要部分）：

的application.js

define(["models/mapModel",
        "views/base/mapView"],function(MapModel, MapView){
    var initialize = function(){

    // Set up the application here
    var mapModel, mapView;

    dojo.ready(function(){

        mapModel = new MapModel();

        mapView = new MapView({
            model : mapModel
        });

        $("#appRoot").html(mapView.render().el);

    });
  };

  return {
    initialize: initialize
  };
});

ViewTemplate.html

<div id="map">map goes here</div>

mapView.js

   // 'viewTemplate' is being retrieved with dojo's define() method,
   // this is not the issue as it is working in many other places.

   initialize : function(){
        var selectFeature = lang.hitch(this, this.getFeature);
        topic.subscribe("selectFeature", selectFeature);
    },
    render : function(){
        var tmpl = _.template(viewTemplate);
        this.$el.html(tmpl());
        this.model.on("change:map", this.createLocator, this);

        //Create the map once everything is drawn
        $(document).ready($.proxy(
            function() {
                this.createMap();
            },
        this));

        return this;
    },
    createMap : function(){
        console.log($('#appRoot').length); // returns 1
        console.log($('#map').length);     // returns 0
    }

我的问题由CreateMap函数中的两行说明。 #appRoot在index.html中是静态定义的，而#map是由jQuery的.html（）函数在render中插入的。似乎在CreateMap（）触发时没有插入#map元素。同样，这只有在从localhost以外的机器上点击应用程序时才会发生。

由于 JP

Answer 1

尝试this.$('#map').length。

$('#map').length不起作用，因为#map尚未添加到页面中，因为您在添加之前调用了渲染。

$("#appRoot").html(mapView.render().el); //渲染视图，然后添加到页面。

下面的代码也会修复它，但无论如何使用this.$会更好。

$("#appRoot").html(mapView.el); // add to page
mapView.render(); // render

Backbone.js jQuery呈现计时问题

1 个答案: