Question

I’m developing a single-page view for a resource that contains multiple nested resources. Using the following template, I can get the top-level attribute or collection to render, but not both:

h1= @name
ul
  #decisions


class Happenator.Views.ShowHappening extends Backbone.Marionette.Layout
  template: "happenings/show"
  regions:
    decisions: "#decisions"

  initialize: ->
    @decisionsView = new Happenator.Views.Decisions(collection: @model.get("decisions"))
    # Uncomment to render @model.name, but lose the decisions
    # @bindTo(@model, "change", @render)

  onRender: ->
    @decisions.show(@decisionsView)

Is there an accepted way to bind the top-level layout to re-render when data changes/arrives, or is all dynamic content support to go into sub-regions?

Answer 1

A Layout renders the DOM elements that the regions will manage. So, calling render on the layout again will forceably re-render the region’s elements. The regions will see this and pick them up again, but this will have various other negative impacts on your app as you’ve noted.

The simple way to handle this is to either:

a) have individual change:attribute event handlers that only update the data that changed

b) use a data-binding solution to do this for you, such as https://github.com/theironcook/Backbone.ModelBinder

A third alternative would be to create a 2nd region within your Layout, and have an ItemView populate that region, with the model. Then you could re-render that view whenever the model changes:

h1= @name
ul
  #decisions

class Happenator.Views.HeaderView extends Backbone.Marionette.ItemView
  template: "happenings/model-template"
  initialize: ->
    @bindTo(@model, "change", @render)

class Happenator.Views.ShowHappening extends Backbone.Marionette.Layout
  template: "happenings/show"
  regions:
    header: "#header",
    decisions: "#decisions"

  initialize: ->
    @decisionsView = new Happenator.Views.Decisions(collection: @model.get("decisions"))
    @headerView = new Happenator.Views.HeaderView(model: @model)

  onRender: ->
    @decisions.show(@decisionsView)
    @header.show(@headerView)

If it were me, I’d go with option #3 and nest another itemview inside of the layout, for the model rendering. This would give you a lot more freedom and flexibility within that view, keeping it separated from the layout.