Backbone.js jQuery rendering timing issue

Question

I have an application that I've been developing for a while now always on a local machine. I am putting it into a server environment now and having issues that I believe are related to the timing of jQuery's .html() function when inserting template into a Backbone View.

On to the code (the important parts):

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
    }

My issue is illustrated by the two lines in the CreateMap function. #appRoot is statically defined in index.html while #map is being inserted by jQuery's .html() function in render. It appears that the #map element is not being inserted by the time CreateMap() fires. Again, this only happens when hitting the app from a machine other than localhost.

Thanks JP

Have you tried scoping the JQuery call for #map? I.e. console.log( this.$('#map').length ); — mnoble01
– mnoble01, Commented Mar 4, 2013 at 19:41

Paul Hoenecke · Accepted Answer · 2013-03-04 19:42:00Z

2

Try this.$('#map').length.

$('#map').length does not work because #map is not yet added to the page, since you are calling render before adding it.

$("#appRoot").html(mapView.render().el); // render view, then adding to page.

Code below would also fix it, but using this.$ is better anyway.

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

answered Mar 4, 2013 at 19:42

Paul Hoenecke

5,0701 gold badge22 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jpeterson Over a year ago

Thank you so much. I had tried your first recommendation initially - but in CreateMap() I'm relying on a 3rd party API that needs that #map to exist in the dom, so I think the first fix you supplied won't work in this case. I just unchained the render() and el methods in application.js and all is well. Thanks again!

Collectives™ on Stack Overflow

Backbone.js jQuery rendering timing issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related