This approach seems like a reasonable way to go ... but you also seem to be doing a bit more rendering than you really need to. If I understand the premise correctly, you have a situation like this:
... and the data for the MainView is changing, while the data for the SubViews is not.
So ideally, just re-render the top part of the MainView, and leave the SubViews alone. Instead of trying to reuse the same "render" function, imagine doing this instead:
... where the hypothetical "renderMainContent" function just renders the template for the top half of the box. Or, maybe the top half of the box is a sub-view in its own right that can listen to its own events. Or, maybe you don't even need a template, and you can just update a couple of granular fields and/or attributes with jQuery. Whatever works.
Yep, I was wondering why "render" would need to be called multiple times.
I usually start off by doing that because I'm lazy, then something usually bites me in the ass (usually - oh hey, we need a transition effect).
And the end result is a bunch of "sub rendering" methods that get called in render ... and as callbacks from model change events. (It's awfully nice when you have to load everything off the server - no default state in the DOM.)
I completely agree with the small render helpers, we've been using that too and it works amazingly. I'll probably write about that next. But I still want `render` to be able to be called multiple times without breaking because it's a public method.
I'd love to read an article about how you guys handle transitions though. We've implemented a few of them, but I have yet to work on them enough to have found really nice patterns.
Absolutely. I'm not saying you should have a single gigantic render method that gets called for every single change. We use a very similar pattern to what @tristan_juricek mentions with small render helpers that get bound as change callbacks. (I'll probably write about that one next.) But since I was talking about subviews I didn't want to go into the non-subview render bits which would be where you'd want render helpers.
Regardless, I'd still have the single `render` as a parent method that renders the initial template via `$.html()` so that my render helpers aren't appending their bits into the DOM. And that parent method still shouldn't break everything if it's called twice.
And then if you wanted to be safe, you could have the render helpers check to see if the view is `rendered` before attempting to do their bit. (And `return this.render();` instead if it isn't yet rendered.)
I think you just want to factor out the part that's changing into it's own subview, and then call that subview's render function instead of rerendering mainview, or writing a one off function.
So ideally, just re-render the top part of the MainView, and leave the SubViews alone. Instead of trying to reuse the same "render" function, imagine doing this instead:
... where the hypothetical "renderMainContent" function just renders the template for the top half of the box. Or, maybe the top half of the box is a sub-view in its own right that can listen to its own events. Or, maybe you don't even need a template, and you can just update a couple of granular fields and/or attributes with jQuery. Whatever works.