Search code examples
backbone.jsnestedviewbackbone-layout-manager

Backbone layoutmanager nested views error


I'm getting a strange error when attempting to use nested views in a Backbone layouamanager. Here is the nested view (I'm also using RequireJS):

define([
'jquery',
'underscore',
'backbone',
'templates',
], function ($, _, Backbone, JST) {
'use strict';

var ResultsView = Backbone.View.extend({
    template: JST['app/scripts/templates/results.ejs'],

});

return ResultsView;
});

And here is the parent layout view:

define([
'jquery',
'underscore',
'backbone',
'templates',
'layoutmanager',
'views/results-view'
], function ($, _, Backbone, JST, manager, ResultsView) {
'use strict';

Backbone.Layout.configure({
  manage: true
}); 

var AppView = Backbone.Layout.extend({
    template: JST['app/scripts/templates/App.ejs'],
    el: '#container',

    views: {
        "#search-results": new ResultsView()
    }
    });

  return AppView;
});

And here is the code that instantiates the parent layout:

define([
'jquery',     
'underscore',
'backbone',
'views/App-view'
 ], function($, _, Backbone, AppView){

var initialize = function(){
    new AppView().render(); 
};

return {
   initialize: initialize
  };

});

When I load the page I get the following error:

"Uncaught TypeError: Cannot read property 'ownerDocument' of undefined"

The error comes from Jquery. If I remove this line from the above code:

el: '#container',

The error goes away. I'm still new to Backbone, so maybe I'm using the view incorrectly? Thanks for any help


Solution

  • I had this as my html:

    <div class="container"></div>
    

    Whereas in my backbone view, I was using el like this:

    el: "#container"
    

    Because it was an id selector and my html used class, backbone could never find the dom element. Changing the html to have an id of "container" fixed it