Untitled

<!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> 

            <!-- 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",
        "dijit/layout/ContentPane",
        "dijit/layout/BorderContainer",

    
        'dojo/domReady!' ], function (array,declare,parser,on) {

            console.log("b4 parse ....")
            parser.parse().then(function(){
                console.log("after parse ....")
            }); 
        });
    </script>
    </body>
    </html>

<div class="my-widget"> <!-- root element cannot have a data-dojo-type defineed -->
    
    
     <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>



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,
        });

        return widget;
    });