Marionette Backbone: Childviews with multiple possible view states

Question

I am moving over from vanilla backbone to Backbone.Marionette and am attempting to solve a common design pattern in a more Marionette style.

I have a common pattern of having a subview(childview) which can have multiple possible states, each state being an individual view or state composed of html and css.

One example of this is profile notes.

My application has a profile objects and each profile possesses a collection of notes.

The profile displays a list of it's notes as a CompositeView (NotesView) which is composed of an ItemView (NoteView) for each note in the collection.

Each NoteView has two possible states, a display state and an edit state. I am currently accomplishing this state change with html and css. In other places in my application I am handling this design pattern by switching between views (destroying old view, creating new view, appending new view).

What I would like to do is have two possible views for each note, NoteDisplayView and NoteEditView, and then control which is rendered by the NotesView.

After reading through the Marionette docs, it seems the Marionette solution to view swapping is to use a layout, region, and then define which view is 'shown' by the region.

I am unclear whether a layout can be embedded within a composite view and if this would nullify the advantages of a composite view.

I could obviously write some custom code to handle this situation, continue managing the state of the NoteView via html and css, but I am wondering what design patterns other Marionette users have found to accomplish this behavior.

Yeah I agree, you should add some code. But by skimming through I think you should look into using a marionette controller. — Michael Joseph Aubry

Vahan Vardanyan Vahan Vardanyan · Accepted Answer · 2014-10-02T20:32:53

I will try to answer your question, especially this section:

"What I would like to do is have two possible views for each note, NoteDisplayView and NoteEditView, and then control which is rendered by the NotesView."

This could be achieved via rewriting CompositeView's getChildView (I guess you are using Marionette 2.x, for Marionette 1.x it's buildItemView ) method which is:

getChildView: function(child) {
    var childView = this.getOption('childView') || this.constructor;

    if (!childView) {
      throw new Marionette.Error({
        name: 'NoChildViewError',
        message: 'A "childView" must be specified'
      });
    }

    return childView;
  },

Just add check here (using model's property) and return needed view NoteDisplayView or NoteEditView .

More specific example:

Lets assume each model has property "state" which is "display" || "edit".

Depending on that state you already know how to render NotesView.

I guess if it's editable, user can change it, after user changed it and pressed "Save", model will be saved and state will be changed to display. Your CompositeView will catch model's change event and will rerender your view, but now model already in display mode, so NoteDisplayView will be rendered.

Hope this helps.

Marionette Backbone: Childviews with multiple possible view states

1 Answers