CODEWITHSUNDEEP
backbone.js
isNaN1247
isNaN1247

Reputation: 18099

How do you append your sub-views in Backbone?

I have a Backbone app that renders several related views on each page they you navigate to. For example, one page renders the following views:

The main table view here is the first to be appended to the DOM by my router - within this view reset is bound to an appendRows function within it - which addes in each table row:

// Instantiate the view, render and append it to the DOM
var tableView = new TableView({ collection: blahCollection });
$("main").append(tableView.render().el);

// Fetch the latest data for the collection (triggers a reset which appends rows)
blahCollection.fetch();

This seems logical to me, however when it comes to adding in a pagination sub-view for example, I ask myself the question, "should a view really be controlling what is appended to the screen"?

Therefore, given the pagination example:

Upvotes: 4

Views: 2186

Answers (1)

Brian Genisio
Brian Genisio

Reputation: 48137

I like letting my router do a lot of the high-level stuff for me. For instance, I will set up a basic layout... something like this:

<body>
    <div id="contextBar">
        <div id="menus"></div>
        <div id="pagination"></div>
    </div>
    <div id="mainTable"></div>
</body>

Then, in my router handler, I'd hook up the views that are unrelated to each other:

var contextView = new ContextView({el: $("#contextBar")});
var menusView = new MenusView({el: $("#menus")});
var paginationView = new PaginationView({el: $("#pagination")});
var tableView = new MainTableView({el: $("#mainTable")});

As far as the main table goes, I see the table view and the rows view being tightly coupled as they are directly related to each other, so I usually have the collection view (your table view) create and manage the individual item views (your table row view).

At least, that is how I organize my code with Backbone.

Upvotes: 4

Related Questions