Backbone sub-view in rendered view - backbone.js

Question

My question is around the best way to sub view a rendered view with Backbone.
Whilst there are a lot of blogs around the topic, I haven't been able to find any practical ideas that I can apply to this use case.
Backstory
On page load, backbone fetches and renders the remote model and remote page template.
The page template is made up of 3 fieldsets, each containing lots of readonly data and images, with an [edit] button.
+-----------------------+ +-----------------------+
| ID: ViewA | | ID: ViewB |
| | | |
| | | |
| EDIT | | EDIT |
+-----------------------+ +-----------------------+
+-----------------------+
| ID: ViewC |
| |
| |
| EDIT |
+-----------------------+
When [edit] is clicked by the user, I'd like a sub view created, the partial (underscore template) fetched, the existing model applied to it, and finally, it to replace the fieldset's innerHTML.
This will make the previously readonly content in the fieldset, editable and saveable by the user. Once saved (or cancelled) by the user, it should push back to the server, and re-render the readonly view.
For argument sake, let's say templates are hosted at /templates/edit/<fieldsetid>.html
Here is the existing code:
Model and Collection
// Model
window.Page = Backbone.Model.extend();
// Collection
window.PageCollection = Backbone.Collection.extend({
model: Page,
url: '/page/view.json'
});
The View
window.PageView = Backbone.View.extend({
initialize:function () {
this.model.bind("reset", this.render, this);
},
events:{
'click fieldset a[role=edit-fieldset]' : 'edit'
},
edit: function(e){
e.preventDefault();
// #TODO Do some subview awesomeness here?
},
render:function (eventName) {
_.each(this.model.models, function (data) {
$(this.el).append(this.template({data: data.attributes}));
}, this);
return this;
}
});
Router
var AppRouter = Backbone.Router.extend({
routes:{
"page/view":"pageView"
},
pageView:function (action) {
this.page = new PageCollection();
this.pageView = new PageView({model:this.page});
this.page.fetch();
$('#content').html(this.pageView.render().el);
}
});
Template Loader
// Borrowed from:
// http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/
// Should probably move to RequireJS and AMDs
utils.loadTemplate(['PageView'], function() {
var app = new AppRouter();
Backbone.history.start();
});
So with that in mind, what are your thoughts? Am I on the right track? Is there another pattern I should look at?
Thanks in advance.

Answer 1

The way I usually approach these situations is as follows (using the existing 'loadTemplate', Page and PageCollection architecture above):
// Model
window.Page = Backbone.Model.extend();
// Collection
window.PageCollection = Backbone.Collection.extend({
model: Page,
url: '/page/view.json'
});
window.PageView = Backbone.View.extend({
template: templates.pageViewTemplate,
render: function() {
var html = this.map(function(model) {
// Important! We don't need to store a reference to the FieldSetViews.
// Simply render them and by passing in the model, we can update the view
// as needed when the model changes.
//
// This is also good to reduce the potential for memory-leaks.
return new FieldSetView({
model: model
}).render();
});
// Do one DOM update.
this.$el.html(html);
return this.$el;
}
});
window.FieldSetView = Backbone.View.extend({
events: {
"click .edit": "_onEdit"
},
template: templates.fieldSetTemplate,
render: function() {
// Replace the top-level div created by backbone with that of your
// template (i.e fieldset). This gets around having to use
// the tagName property which should really be in your template.
this.setElement(this.template.render(this.model.toJSON()));
return this.$el;
},
_onEdit: function(e) {
// Handle edit mode here by passing the model to another view
// or by enhancing this view to handle both edit and view states.
}
});