WIP: Add auto discover of region element

src/mixins/regions.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import _invoke from '../utils/invoke';
 import buildRegion from '../common/build-region';
+import MarionetteError from '../error';
 import Region from '../region';
 
 // MixinOptions
@@ -126,11 +127,16 @@ export default {
   // Provides access to regions
   // Accepts the region name
   // getRegion('main')
-  getRegion(name) {
+  getRegion(name, options) {
     if (!this._isRendered) {
       this.render();
     }
-    return this._regions[name];
+    const region = this._regions[name];
+    if (region && region.el) {
+      return region;
+    } else {
+      return this.autoAddRegion(region, name, options);
+    }
   },
 
   // Get all regions
@@ -146,7 +152,7 @@ export default {
   },
 
   showChildView(name, view, ...args) {
-    const region = this.getRegion(name);
+    const region = this.getRegion(name, ...args);
     region.show(view, ...args);
     return view;
   },
@@ -157,6 +163,60 @@ export default {
 
   getChildView(name) {
     return this.getRegion(name).currentView;
-  }
+  },
+
+  // allow the user to provide its own selector
+  getRegionsSelector() {
+    return '[data-region]';
+  },
+
+  // allow the user to provide its own selector
+  getRegionSelector(name) {
+    return `[data-region="${name}"]`;
+  },
+
+  findRegionElement(name) {
+    return this.Dom.findEl(`[data-view-cid="${this.cid}"]${this.getRegionSelector(name)}`);
+  },
+
+  // allow the user to add more
+  // default options from el data attribute
+  getRegionDefaultOption(name, el) {
+    return {el};
+  },
+
+  idRegionElements() {
+    const regionEls = this.Dom.findEl(this.el, this.getRegionSelector());
+    if (regionEls.length > 0) {
+      regionEls.forEach(el => el.setAttribute('data-view-cid', this.cid));
+    }
+  },
+
+  autoAddRegion(region, name, options) {
+    let regionEl = this.findRegionElement(name);
+
+    if (!regionEl || regionEl.length === 0) {
+      throw new MarionetteError({
+        name: 'NoMatchingRegion',
+        message: 'Cannot find a region named ${name} in the view ${this.cid}'
+      });
+    }
+
+    if (region) {
+      region._initEl = region.el = region.options.el = regionEl;
+      region.$el = region.getEl(regionEl);
+    } else {
+      region = this.addRegion(name, _.extend({}, this.getRegionDefaultOption(name, regionEl), options));
+      // temporary fixes missing aggressive reset
+      // https://github.com/marionettejs/backbone.marionette/issues/3540
+      const superReset = region.reset;
+      region.reset = function reset(opts) {
+        superReset.call(region, opts);
+        region.el = null;
+        return region;
+      };
+      return region;
+    }
+  },
 
 };

src/view.js

@@ -93,6 +93,7 @@ const View = Backbone.View.extend({
 
     this._renderTemplate(template);
     this.bindUIElements();
+    this.idRegionElements();
 
     this._isRendered = true;
     this.triggerMethod('render', this);