Backbone Model View: Switch between editing (via form) and display

Question

With Backbone I have created a view for a model. I would like to provide the following workflow to the users: a) Initially, model content is just displayed via a template and there is an edit button b) if the user clicks the edit button, the model content will be displayed in a form and can be saved back to the model by clicking a save button. c1) if saved successfully, the new model content we be rerendered via the template and displayed again c2) if there were any validation errors, the form is updated with the errors.

I came up with the following options on how to implement this. But I am not sure, on the best practices. Any advice is highly welcome.

Option 1: 2 sub views (one for the displaying the content, one for editing it) that are dynamically created on any switch between display and edit (and dropped afterwards).

Option 2: 2 sub views (one for the displaying the content, one for editing it) that are hidden/unhidden on any switch (like toggle)

Option 3: 2 sub views (one for the displaying the content, one for editing it) that are assigned to the parent element on any switch.

Option 4: 1 View to manage the model content and 2 templates (one for displaying and one for editing) that are rendered on any switch between between display and edit.

From my gut feeling, I clearly would prefer option 4, since it will need ony 1 view that could handle all logic. But maybe I have overseen something in terms of performance, event handling, DOM access etc. So any hard arguments on the pros and cons of the 4 options are highly appreciated. What do you think?

Answer 1

I have tried option 3 (2 subviews) and option 4 (1 view using 2 templates).

Here is an argument for 3:

Switching between readonly view and edit view in backbone js

And here is an article promoting 4, under "Switching a Contact Into Edit Mode":

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-4/

---

I found option 3 to more trouble, because now you have 3 views using the same model. It brings up issues in the DOM, because now there is an el for the parent and an el for each child, nested inside. It also brings up issues with encapsulation, because the child views should really be inherited from the parent, but that's difficult with javascript:

Access parent class member with javascript inheritance?

I wanted option 3 to work more like an abstract base class tied to the el in the DOM. Then view and edit could inherit from it and internally set the el, preventing nesting of two els. But this breaks how backbone.js nests views:

Swap/switch/exchange backbone.js views in place?

---

Option 4 "just worked" the first time I tried it. It's trivial to have an editTemplate that gets rendered if View.editing is true. And in practice, the read-only view tends to be so small, with so little interaction by definition, that it only adds to an edit view by a few lines.

The downside to 4 is that you dirty your view with switching logic.

An argument for 4 is that it increases the possibility to reuse code and reinforce DRY.

One last argument for 4 is that you might have a "rich" form at some point that is always on, and maybe you only want to enable editing on specific form elements. For example a Contact form might have an Address view inside that handles its own updating. So view/edit might not be mutually exclusive down the road.

---

I finally resigned myself to going with what worked (option 4) because both options use two templates in the html file. The backbone.js implementation details don't matter to the end user.

I think this is all worthy of some lengthy articles weighing the pros and cons of each approach, with real-world examples. Backbone.js also needs to have backbone-relational built into it, and probably Backbone.ModelBinder, with a better ._super implementation. If some of these concepts were more fleshed out, it would make it easier to implement option 3 IMHO.

But I'm curious what others think, because neither 3 or 4 are perfect as they stand now, and I'd like to know what the best practices are for this, since form handling is one of the primary reasons that people get into backbone.js in the first place.

Answer 2

I've been working on something like this except that the edit button is attached not to the whole model, but to individual attributes, which can be edited "in place". To do that I've been using backbone-forms, replacing the element to be edited by a backbone form and then re-rendering it after the form has been submitted. This works quite well.

In your case, since you're editing the whole model at once, it would actually be easier. When the user clicks the edit button, replace the view with a backbone form, and when they submit that re-render the model view with the errors or success message. Backbone forms makes displaying error messages on the form quite easy.