Question

More than a specific answer I’m trying to get recommendations on best practices when deciding how to structure view code. In my current project I have a clear/clean mapping of models to views but all these are presented inside a pretty standard container with global navigation elements. For the sake of this question, picture it this way:

• Header
  • tabs
• cards
  • card 1
  • card 2
  • card 3

You click on a header tab and a card slides in. the cards themselves have a back button that slides it out to reveal the previously displayed card. The actual content of the card is generated by another view which likely maps to a model. I guess it’s not that much different than common interface patterns in iOS or Android.

Anyways, I want to have a view class called “Card” with a template with the navigation for the card, and whatever else goes in every card. Then I’d like to somehow pass the content of the card to it.

Can I create a Card class and then extend it to create the subclasses (ie: subviews)? So, say I have a model called UserModel and a view called UserView that takes care of the form for that model, I want to do something like:

var Card = Backbone.View.extend();
var UserView = Card.extend();

Then when rendering have that result in, say:

<!-- code from Card -->
<div class="card">
    <nav></nav>

    <!-- code from UserView -->
    <div class="user">
        ...
    </div>
    <!-- END code from UserView -->


</div>
<!-- code from Card -->

I realize a quick way to do this would be to simply manually grab the Card template from every view that I need wrapped, etc… but that feels wrong.

Does that make sense?

Oh… keep in mind that part of the advantage that I’m hoping this has is that I can interact with the UserView instance and have those trigger the necessary methods in the parent class. So…

var uv = new UserView();
uv.render() // <- should render the user view with the card wrapped around it.

I don’t want to have to manually render the card, of course.

How would you structure it?

Thanks!

Answer 1

Since you asked specifically for best practices and it seems like you’re starting into backbone let’s first start with some basics.

Backbone has views that are defined with a template engine. The default template engine is underscore.js but a far better template engine is mustache.js or better yet it’s higher level wrapper handlebar.js (HandleBarJS Website). This let’s you structure your view and subview exactly like you described below all into one template with markers for being filled in with logic and thus bringing you down to only one big render event.

Now that you’ve got a good template to inject your model into you still want to make that render event perform well so let’s make sure you precompile your template. For a good reason to understand why this is necessary read this article (Performance benefit of Precompiling templates). Handlebar.js has a method to precompile your templates so I won’t give samples here.

Now the last step is build up your model. If you build it in JSON format you can simply just ‘execute’ your template with the model.

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

I have used Handlebar for illustrative purposes as the template creation is much easier IMHO but really anything will work with this model.

Hope that get’s you on the right path.