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
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