undefined

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .my-widget,
    #borderContainer1,
    #borderContainer2,
    #borderContainer3 {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body class="claro">
  <!-- configure Dojo -->
  <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',            packages: [ {                name: 'myapp',                location: location.pathname.replace(/\/[^/]+$/, '') + 'myapp'            } ]" src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true, liveSplitters:true" id="borderContainer1">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 100px;">Hi, I'm leading pane</div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
      <!-- embedded BorderContainer not working when declared inside a widget's template -->
      <!-- <div data-dojo-type="myapp/MyWidget" id="borderContainer3"></div> -->
      <div id="borderContainer3"></div>
      <!-- embedded BorderContainer works ok when declared here             <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer2">                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 100px;">Hi, I'm leading pane of center</div>                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center of center</div>            </div--></div>
  </div>
  <script>
    require(["dojo/_base/array", 'dojo/_base/declare', "dojo/parser", "dojo/on", "myapp/MyWidget", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", 'dojo/domReady!'], function(array, declare, parser, on, MyWidget) {
          console.log("b4 parse ....") 
          parser.parse().then(function() {
                console.log("after parse ...."); //create your widget here  
                new MyWidget({}).placeAt("borderContainer3");  
          }); 
    });
  </script>
</body>

</html>

<div class="my-widget"> <!-- root element cannot have a data-dojo-type defineed -->             <div data-dojo-attach-point="containerNode"  data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer2">            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 100px;">Hi, I'm leading pane of center</div>            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center of center</div>        </div></div>

define(['dojo/_base/declare', "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/text!./MyWidget.html", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", ], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
      var widget = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
            templateString: template,
            startup() {
              this.inherited(arguments);
              /*console.log("startup", this);
              // HACK :
              setTimeout(function(){                        
                this.containerNode.resize()                    
                
              }.bind(this),100) */    
            }        
        
      });        
      return widget;   
});