Mystery <div>

[chrisfinch]

A mystery <div> element is wrapping all of the contents of the views inside the main #wrapper:

<section id="wrapper"><div><div id="masthead">
    <h1 id="logo">thefrontend.co</h1>
    <h2 id="tagline">The Jobsite for Web Developers</h2>
    <input type="text" id="search" name="search" value="Search Jobs" data-val="Search Jobs">
    <ul id="homeInfoButtons">
        <li><a href="#who" class="who">Who</a></li>
        <li class="sep">|</li>
        <li><a href="#what" class="what">What</a></li>
        <li class="sep">|</li>
        <li><a href="#why" class="why">Why</a></li>
    </ul>
</div>

<section id="homeInfoPanel"></section>
</div></section>

This element is not in any of the templates nor is it added in any of the views - I've tracked it down to the render on the home view but I have no idea why it is generated....

[bengourley]

Backbone views implicitly have a div as their root element (unless another tag name or existing element is specified). Don't know if this is what is causing your issue as I've just seen this in my inbox and haven't looked at the code.

[BenConstable]

Yeah that's definitely what it is (see the backbone docs). You need to specify a root element for the view to render into, either by creating it with tagName, class etc or selecting an existing element (I guess $('#wrapper') in this case).

[chrisfinch]

Well, not sure how I would solve that in this case since the home view uses the region manager which already appends the rendered view to the #wrapper

If I specify el: '#wrapper' on the home view then I get an error: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

[BenConstable]

Unfortunately having some sort of root element to a view is a requirement of Backbone (this issue explains the thinking behind it), so it would be probably be best to include it.

The error you're getting I assume is coming from trying to append the #wrapper element to itself, as it can't be the root of the RegionManager and the HomeView if one is nested inside the other.

If the root element in the view is absolutely not option, you could add a flag to the view (noWrap or something), and then the RegionManager's openView method could change to:

var openView = function (view) {
    view.render();
    $(el).html((view.noWrap ? view.$el.innerHtml() : view.el));
    if (view.onShow) {
        view.onShow();
    }
};

[bengourley]

It's not unfortunate, it's useful!

[chrisfinch]

I think as long as we know where its coming from and its not doing any harm then it will be fine for now. Maybe we can implement your region manager alteration at some future point.