Need clarifications on adding regions dynamically in Marionette

Question

I have an application where I need to display metrics. The application needs to display a separate vertical section for each metric. When I started this, there were only 5 metrics so I naively created a template with 5 regions, one for each metric I needed to display. Now, new metrics need to be added and I want to avoid adding "hardcoded" region divs in the template. I want to refactor this and create the required regions dynamically at startup time based on some configuration data.

So I have been looking at the latest Marionette release and in question "Dynamically add regions to Marionette layout", Derick Bailey mentions that Marionette v1.0 supports dynamic regions in Layouts through addRegion(), as in:

var layout = new MyLayout();
layout.render()
layout.addRegion("someRegion", "#some-element");
layout.someRegion.show(new MyView());

I have tried that in my code (using Marionette 1.0.2) and I am not getting it to work. I don't have a div with id="some-element" in my template and I suspect this could be the reason. I was hoping that Marionette would create that div itself.

Perhaps my expectation of what dynamically adding a region means is wrong. So my first question is: when adding regions dynamically to a layout, must the element id passed in the addRegion() function already exist in the layout?

If so, then I am back to the problem of having to "burn" in the template those divs for the regions to attach themselves too. My follow-up question is then: What is the best way of doing this in a data-driven fashion? Is it a matter of writing my own render() function so that the right set of divs get created? Or perhaps providing my Layout with a model object that will contain data which the template can then iterate through to create the necessary divs? How do we add regions dynamically to a Layout object if we don't know in advance how many regions we will actually need?

agrawalankur agrawalankur · Accepted Answer · 2014-07-29T21:58:48

Aa @aaronfay specified, we need to use jQuery to create the element on the page. Here is some sample code:

var layout = new MyLayout();
layout.render()
var regionName = "dynamicRegion"; 
layout.$el.append('<div id="'+regionName+'"></div>');
layout.addRegion("someRegion", "#"+regionName);
layout.someRegion.show(new MyView());

Need clarifications on adding regions dynamically in Marionette

2 Answers