Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

WIP rendering twice #181

Closed
engram-design opened this Issue · 11 comments

2 participants

@engram-design

Been working with the WIP branch, which is working great. However, the latest commit seems to make my sub-views render twice.

Although, this could be due to the way that I've structured my app - and please correct me if my approach is wrong...

My layout is structured like this:

useLayout: function(name) {
    this.layout = new Backbone.LayoutView({
        template: name,
        className: 'layout ' + name,
        id: 'layout',
        views: {
            '#content': new Backbone.LayoutView({
                template: 'page'
            })
        }
    });

    return this.layout;
}

I call this.layout.render() in the router inside initialize, as this layout contains some generic 'app-based' layout items (menu, account details, etc). Then, on each route I use this.layout.views['#content'].render() to render the #content container, which holds dynamic content (which changes when navigating pages. I've only done this, so that when navigating through the app, the entire container isn't re-rendered!

As I said, the previous commit worked fine, but since this latest commit 'fixed' something, I'm thinking I might be the one doing something wrong. Although, from first glance, it seems when calling this.layout.render() will actually render the child-views as well, and calling this.layout.views['#content'].render() will render it again!

If the above sounds correct, I'm happy to put together an example illustrating my issue...

@tbranyen
Owner

Yeah, I'm not happy with this solution. I've talked it over with @mitya777 and I'm going to implement a more reliable method of rendering sub views.

@engram-design

I'd agree that for some cases, you'd simply just want to render everything in one go, but it's a bit different when working with a progressive layout as described above, which is purely for good user-interaction (they don't just see a blank page when sub views are waiting to be fetched/rendered)...

@tbranyen
Owner

Very true.

@tbranyen
Owner

I feel like this is an important enough issue to tackle before releasing 0.7 stable.

@engram-design

Sorry to do that to you mate :P

@tbranyen
Owner

Can you try the latest WIP?

@engram-design

Hmm, still rendering twice, but I should mention that this only occurs when you first load the page. After navigating around, it works fine, elements in the sub-view aren't rendered twice. As such, I have to put some handling code in each route...

    if (this.layout.rendered) {
        this.page_layout.render();
    }

Where this.layout.rendered is set to true in the routers initialize function, which only occurs on page load. This fixes the issue, but would rather know if what I'm doing is correct!

@tbranyen
Owner

What you're doing is creating a new Layout every time you call useLayout which is incorrect. You need a very similar check inside that function:

https://github.com/tbranyen/backbone-boilerplate/blob/master/app/app.js#L65

@tbranyen tbranyen closed this
@engram-design

I'm doing that already, but should I also be checking for the sub-view's existence? I might but together an example for you...

@tbranyen
Owner

You say you're doing that already, but that's not what you showed in your code in the original post. If you could put together a jsfiddle illustrating the issue, that would be very helpful, but I do not believe this a LayoutManager bug.

@engram-design

My apologies - my fault for trying to be minimise code in the original post :)

I've put up the project that I'm working on in a repo (I couldn't get a fiddle to work out properly), and I apologise for the mess in the project. Hopefully you can pick out what might be going wrong... Just click the login button, and it'll show 3 widgets. Refresh the page, and you'll be shown 6 widgets!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.